:host { display: inline-block; }

.comp-scu-button.outline.icon {
  @include comp-scu-icon-button-outline-default;
  @include comp-scu-icon-button-outline-default--figma-autolayout;

  .icon {
    @include comp-scu-icon-button-outline-default-icon--sizing;
  }

  .label {
    @include comp-scu-icon-button-outline-default-label;
  }

  &:hover {
    @include comp-scu-icon-button-outline-hover;
    @include comp-scu-icon-button-outline-hover--figma-autolayout;

    .icon {
      @include comp-scu-icon-button-outline-hover-icon--sizing;
    }

    .label {
      @include comp-scu-icon-button-outline-hover-label;
    }
  }

  &:focus {
    @include comp-scu-icon-button-outline-focus;
    @include comp-scu-icon-button-outline-focus--figma-autolayout;

    .icon {
      @include comp-scu-icon-button-outline-focus-icon--sizing;
    }

    .label {
      @include comp-scu-icon-button-outline-focus-label;
    }
  }

  &.disabled {
    @include comp-scu-icon-button-outline-disabled;
    @include comp-scu-icon-button-outline-disabled--figma-autolayout;

    .icon {
      @include comp-scu-icon-button-outline-disabled-icon--sizing;
      #iconSvg {
        fill: var( --comp-scu-icon-button-outline-disabled-label-color );
        & * {
          fill: var( --comp-scu-icon-button-outline-disabled-label-color );
        }
      }
    }

    .label {
      @include comp-scu-icon-button-outline-disabled-label;
    }
  }
}