/*!****************************
*****     button-icon     *****
******************************/
@layer component {
  @scope ([data-component-id$=":button-icon"]) {
    :scope {
      display: block;
      background-color: var(--clr-primary-500);
      border-radius: var(--radius-sm);
      padding: 0.5rem;
    }

    svg {
      fill: var(--clr-light-500);
      height: var(--fs);
      width: auto;
      /*color: var(--clr-primary-500);*/
    }
  }
}