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

@layer kz-components {
  .iconWrapper {
    line-height: 1;
  }

  .icon {
    color: $color-gray-500;
  }

  .selectToggle {
    @include button-reset;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    display: inline-flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    height: $spacing-xl;
    width: 100%;
    min-width: 0;
    margin-top: $spacing-xs;
    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
    border-radius: $border-solid-border-radius;
    background-color: $color-white;
    padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
    padding-inline: 0.875rem $spacing-12;
    font-family: $typography-paragraph-body-font-family;
    font-weight: $typography-paragraph-body-font-weight;
    font-size: $typography-paragraph-body-font-size;
    line-height: $typography-paragraph-body-line-height;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    color: $color-purple-800;
    white-space: nowrap;

    &:hover,
    &:active,
    &:focus {
      .icon {
        color: $color-gray-600;
      }
    }

    &:active,
    &:hover {
      background-color: $color-gray-200;
      border-color: $color-gray-600;
    }

    &:focus {
      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
        var(--color-blue-500);
      outline-offset: 1px;
      background-color: $color-gray-200;
      border-color: $color-gray-600;
    }
  }

  .error {
    border: $border-solid-border-width $border-solid-border-style $color-red-500;
  }

  .caution {
    border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
  }

  .disabled {
    border: $border-solid-border-width $border-solid-border-style $color-gray-300;
    background-color: $color-gray-100;
    color: $color-gray-500;
    pointer-events: none;
  }

  .reversed {
    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
    background-color: transparent;
    color: $color-white;

    &.selectToggle .icon {
      color: rgb(255, 255, 255, 0.8);
    }

    &:active,
    &:hover,
    &:focus {
      background-color: rgba($color-white-rgb, 0.1);
      border: $border-solid-border-width $border-solid-border-style $color-white;

      .icon {
        color: $color-white;
      }
    }

    &:focus {
      outline-color: var(--color-blue-300);
    }

    .error {
      border-color: $color-red-300;
    }

    .caution {
      border-color: $color-yellow-400;
    }
  }

  .reversed.disabled {
    background-color: transparent;
    border-color: rgba($color-white-rgb, 0.3);
    color: rgba($color-white-rgb, 0.3);
  }

  .value {
    width: 100%;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline-end: var(--spacing-12);
  }
}