@import '../utils/variables';
@import '../Button/Button.module';
@import '../IconButton/IconButton.module';
@import '../../Pagination/subcomponents/PaginationLink/PaginationLink.module';
@import '../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module';

@layer kz-components {
  .container {
    display: inline-block;
  }

  .button {
    @extend %button;
  }

  .default {
    @extend %variant-default;
  }

  .primary {
    @extend %variant-primary;
  }

  .destructive {
    @extend %variant-destructive;
  }

  .secondary {
    @extend %variant-secondary;

    &.destructive {
      @extend %variant-secondary-destructive;
    }
  }

  .small {
    @extend %variant-small;
  }

  .label {
    line-height: 1;

    &:not(:first-child) {
      @include ca-margin($start: 0.5em, $end: null);
    }

    &:not(:last-child) {
      @include ca-margin($end: 0.5em, $start: null);
    }
  }

  .fullWidth {
    width: 100%;

    .button {
      display: flex;
      width: 100%;
      justify-content: center;
    }

    #{$className--content} {
      justify-content: center;
    }
  }

  .iconWrapper {
    height: 20px;
    align-self: flex-start;
  }

  .additionalContentWrapper {
    display: inherit;

    &:not(:last-child) {
      @include ca-margin($end: 0.5em, $start: null);
    }
  }

  .loadingSpinner {
    // This is to fix a problem in safari where the svg stretched too high
    svg {
      height: 100%;
    }
  }

  .centeredLoadingSpinner {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }

  .hidden {
    visibility: hidden;
  }

  .iconButton {
    @extend %icon-button;
  }

  .circleButton {
    @extend %circle-button;
  }

  .directionalLink {
    @extend %directional-link;
  }

  .paginationLink {
    @extend %pagination-link;
  }

  .isPaginationLinkActive {
    @extend %pagination-link--active;
  }
}