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

@layer kz-components {
  %circle-button {
    width: 40px;
    height: 40px;
    min-height: auto;
    margin: 0 var(--spacing-4);
    border-radius: 50%;

    &:not(:disabled) {
      &:focus-visible {
        &::after {
          border-radius: 50%;
        }
      }
    }

    #{$className--content} {
      height: auto;
      color: $color-blue-500;
    }

    &.reversed {
      #{$className--content} {
        color: $color-white;
      }
    }
  }

  %pagination-link {
    font-weight: $typography-paragraph-body-font-weight;
    font-size: $typography-button-secondary-font-size;
    border-color: $border-borderless-border-color;

    @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);

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

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

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

  %pagination-link--active {
    background-color: $color-blue-500;
    border-color: $border-borderless-border-color;
    cursor: initial;

    @include enabled-pseudo-states-variant($color-blue-500, $border-borderless-border-color);

    &:not(:disabled) {
      &:active {
        transform: unset;
      }
    }

    #{$className--content} {
      color: $color-white;
    }

    &.reversed {
      background-color: $color-white;

      @include enabled-pseudo-states-variant($color-white);

      #{$className--content} {
        color: $color-purple-800;
      }
    }
  }
}