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

@layer kz-components {
  %button {
    @include button-reset;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: $typography-button-primary-font-family;
    font-weight: $typography-button-primary-font-weight;
    font-size: $typography-button-primary-font-size;
    line-height: $typography-button-primary-line-height;
    letter-spacing: $typography-button-primary-letter-spacing;
    display: inline-flex;
    // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
    //  and this element is an <a>, causing the element to be full width.
    align-items: center;
    box-sizing: border-box;
    min-height: $button-height;
    border: $border-solid-border-width $border-solid-border-style;
    border-radius: $border-solid-border-radius;
    position: relative;
    text-align: left;
    cursor: pointer;
    overflow: visible; // Required for the focus ring on IE11

    &[href] {
      text-decoration: none;
    }

    &:not(.disabled, .working) {
      &:active {
        transform: translateY(1px);
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      &::after {
        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);

        content: '';
        position: absolute;
        background: transparent;
        border-color: $color-blue-500;
        border-radius: $border-focus-ring-border-radius;
        border-width: $border-focus-ring-border-width;
        border-style: $border-focus-ring-border-style;
        inset: calc(-1 * #{$focus-ring-offset});
      }
    }

    &.reversed {
      &:focus-visible {
        &::after {
          border-color: $color-blue-300;
        }

        &.disabled,
        &.working {
          &::after {
            border-color: $color-gray-400;
          }
        }
      }
    }

    &.disabled,
    &.working {
      cursor: default;
      opacity: 30%;

      &:focus-visible {
        &::after {
          border-color: $color-purple-800;
        }
      }
    }

    #{$className--content} {
      height: 100%;
      display: flex;
      align-items: center;
      padding: $button-vertical-padding calc(#{$spacing-md} - #{$border-solid-border-width});
    }
  }

  %variant-default {
    background-color: $color-white;
    border-color: $color-gray-500;
    color: $color-purple-800;

    @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600);

    &.reversed {
      background-color: transparent;
      border-color: rgba($color-white-rgb, 0.65);
      color: $color-white;

      @include enabled-pseudo-states-variant(rgba($color-white-rgb, 0.1), $color-white);
    }
  }

  %variant-primary {
    background-color: $color-blue-500;
    border-color: $border-borderless-border-color;
    color: $color-white;

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

    &.reversed {
      background-color: $color-green-300;
      border-color: $border-borderless-border-color;
      color: $color-purple-800;

      @include enabled-pseudo-states-variant($color-green-400, $border-borderless-border-color);
    }
  }

  %variant-destructive {
    background-color: $color-red-500;
    border-color: $border-borderless-border-color;
    color: $color-white;

    @include enabled-pseudo-states-variant($color-red-600, $border-borderless-border-color);

    &.reversed {
      background-color: $color-red-300;
      border-color: $border-borderless-border-color;
      color: $color-purple-800;

      @include enabled-pseudo-states-variant($color-red-400, $border-borderless-border-color);
    }
  }

  %variant-secondary {
    font-family: $typography-button-secondary-font-family;
    font-weight: $typography-button-secondary-font-weight;
    font-size: $typography-button-secondary-font-size;
    line-height: $typography-button-secondary-line-height;
    letter-spacing: $typography-button-secondary-letter-spacing;
    background-color: transparent;
    border-color: $border-borderless-border-color;
    color: $color-blue-500;

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

    #{$className--content} {
      padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width});
      padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width});
    }

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

      @include enabled-pseudo-states-variant(
        rgba($color-white-rgb, 0.2),
        $border-borderless-border-color
      );
    }
  }

  %variant-secondary-destructive {
    color: $color-red-600;

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

  %variant-small {
    min-height: $button-small-height;

    #{$className--content} {
      padding-top: $button-vertical-padding--small;
      padding-bottom: $button-vertical-padding--small;
    }
  }
}