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

@layer kz-components {
  // Vars
  $button-height: 48px;
  $button-base-padding-horizontal: $spacing-sm;
  $button-icon-size: 1.25rem; // 20px

  $disabled-opacity: 0.5;
  $placeholder-opacity: 0.7;

  .button {
    @include button-reset;

    position: relative;
    display: flex;
    align-items: center;
    height: $button-height;
    width: 100%;
    color: $color-purple-800;
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    font-weight: $typography-paragraph-body-font-weight;
    line-height: 1.5;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    text-align: start;
    background-color: $color-white;
    background-clip: padding-box;
    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
    border-radius: $border-solid-border-radius;
    margin-top: $spacing-6;
    padding: 0 $button-base-padding-horizontal;

    &:focus-visible:not([disabled]),
    &:hover:not([disabled]) {
      background-color: $color-gray-200;
      border-color: $color-gray-600;
      color: $color-purple-800;
    }

    &:focus-visible:not([disabled]) {
      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
      outline-offset: 1px;
    }

    :focus:not([disabled]) {
      outline: none;
    }

    &.disabled {
      background: $color-white;
      opacity: $disabled-opacity;
      color: rgba($color-purple-800-rgb, $placeholder-opacity);
      border-color: rgba($color-gray-500-rgb, 0.7);
    }

    .value {
      padding-inline: 1.75rem $button-base-padding-horizontal;
    }
  }

  .startIconAdornment {
    margin-top: -1px;
  }

  // Icon adornment styles
  @mixin vertically-center-icon {
    position: absolute;
    height: $button-icon-size;
    top: 50%;
    transform: translateY(-50%);
  }

  /* stylelint-disable no-descending-specificity */
  .withStartIconAdornment {
    .startIconAdornment {
      @include vertically-center-icon;

      color: $color-purple-800;
      opacity: $disabled-opacity;
      inset-inline: $spacing-sm auto;
    }

    &:focus-within:not(.disabled),
    &:hover:not(.disabled) {
      .startIconAdornment {
        opacity: $placeholder-opacity;
      }
    }

    .button {
      padding-inline: calc(#{$spacing-md} + #{$button-icon-size}) $button-base-padding-horizontal;
    }
  }
  /* stylelint-enable no-descending-specificity */
}