@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/border';
@import '../utils/mixins';
@import '../utils/variables';

@layer kz-components {
  %icon-button {
    width: $button-height;
    border-color: $border-borderless-border-color;

    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);

    & #{$className--content} {
      justify-content: center;
      width: 100%;
      padding: 0;
    }

    &:not(.reversed) {
      &.default {
        background-color: transparent;
        color: inherit;

        @include enabled-pseudo-states-variant($background-color: $color-gray-200);
      }
    }

    &.reversed {
      border-color: $border-borderless-border-color;

      @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
    }
  }
}