@import '~@kaizen/design-tokens/sass/typography';
@import '~@kaizen/design-tokens/sass/shadow';
@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';

/*
  NOTE: Select is NOT in @layer kz-components

  Because the styles in this module need to override the un-layered styles
  provided by react-select, we do not wrap them in @layer kz-components the way
  we do all other Kaizen components.

  This means that consuming apps will not be able to override these styles with
  Tailwind v4+ utility styles, which are generated in @layer utilities.

  If we ever need to get these styles into a layer, we may need to update our
  use of React Select to disable its styles and replace them with a layered
  version of our own, or perhaps use something like
  https://github.com/DefinedNet/postcss-assign-layer to assign the components
  layer to the React Select styles.
*/

// Should match the values for the Input component
$input-height: 48px;
$focus-border-color: $color-blue-500;

%focus-border {
  $focus-ring-offset: calc((#{$border-focus-ring-border-width} * -2) - 1px);

  content: '';
  position: absolute;
  background: transparent;
  border-radius: $border-focus-ring-border-radius;
  border-width: $border-focus-ring-border-width;
  border-style: $border-focus-ring-border-style;
  border-color: $focus-border-color;
  inset: $focus-ring-offset;
}

@mixin base-font-style() {
  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;
}

/* stylelint-disable no-descending-specificity */
.specificityIncreaser {
  .multiValue {
    margin: 0.2375rem;
    z-index: 1;
  }

  .dropdownIndicator {
    color: rgba($color-purple-800-rgb, 0.7);

    &:hover {
      color: rgba($color-purple-800-rgb, 0.7);
    }
  }

  .control {
    min-height: $input-height;
    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
    border-radius: $border-solid-border-radius;

    &.disabled {
      opacity: 30%;
    }

    &:hover {
      border-color: $color-gray-600;
      background-color: $color-gray-100;
      cursor: pointer;
    }

    &:focus-within {
      &::after {
        @extend %focus-border;
      }
    }
  }

  .valueContainer {
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
  }

  .indicatorsContainer {
    z-index: 1;
  }

  .loadingMessage {
    @include base-font-style;
  }

  .focusedControl {
    box-shadow: none;

    &:hover {
      box-shadow: none;
    }
  }

  .menu {
    // Temporary 6px until we redesign this component with Inter
    border: 6px $border-solid-border-style transparent;
    border-radius: $border-solid-border-radius;
    box-shadow: $shadow-large-box-shadow;
    z-index: 3;

    // built-in class of React Select that is not easily styled any other way in CSS
    // (This is the "MenuList" div that wraps all the options)
    > div {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .groupHeading {
    font-family: $typography-heading-6-font-family;
    font-weight: $typography-heading-6-font-weight;
    font-size: $typography-heading-6-font-size;
    line-height: $typography-heading-6-line-height;
    letter-spacing: $typography-heading-6-letter-spacing;
    text-transform: capitalize;
    color: rgba($color-purple-800-rgb, 0.7);
  }

  .option {
    @include base-font-style;

    cursor: pointer;
    border-radius: $border-focus-ring-border-radius;
    border-width: $border-focus-ring-border-width;
    border-style: $border-focus-ring-border-style;
    border-color: transparent;
  }

  .focusedOption {
    background-color: $color-blue-100;
    color: $color-blue-500;
    border-color: $focus-border-color;

    &.disabledOption {
      color: $color-purple-800;
      border-color: $color-gray-500;
      background: transparent;
    }

    &:active {
      background-color: $color-blue-100;
    }
  }

  .selectedOption {
    font-weight: $typography-paragraph-bold-font-weight;
    color: $color-blue-500;

    &:not(.focusedOption) {
      background-color: transparent;
    }
  }

  .disabledOption {
    cursor: not-allowed;
    opacity: 30%;
  }

  .noOptionsMessage {
    @include base-font-style;
  }

  .singleValue {
    @include base-font-style;
  }

  &.reversed {
    .singleValue {
      color: $color-white;
    }

    .singleValueOverrides {
      color: $color-white;
    }

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

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

  &.default {
    &.reversed {
      .control {
        background: transparent;
        color: $color-white;
        border-color: $color-white;
        border-radius: $border-borderless-border-radius;

        &:hover {
          background: rgba($color-white-rgb, 0.2);
        }

        &.disabled {
          opacity: 30%;
        }
      }

      .dropdownIndicator,
      .clearIndicator {
        color: $color-white;
      }

      &.error {
        .control {
          border: $border-solid-border-width $border-solid-border-style $color-red-300;
        }
      }
    }
  }

  &.secondary,
  &.secondarySmall {
    &.default {
      .control {
        background: transparent;
        border: $border-borderless-border-width $border-borderless-border-style
          $border-borderless-border-color;
        border-radius: $border-borderless-border-radius;

        .singleValue {
          color: $color-blue-500;
        }

        &:hover {
          background: $color-blue-100;
        }

        &.disabled {
          opacity: 30%;
        }

        &.focusedControl {
          background: $color-blue-100;

          &::after {
            @extend %focus-border;
          }
        }
      }

      .dropdownIndicator {
        color: $color-blue-500;
      }
    }

    &.reversed {
      .control {
        background: rgba($color-white-rgb, 0.1);
        color: $color-white;
        border: $border-borderless-border-width $border-borderless-border-style
          $border-borderless-border-color;
        border-radius: $border-borderless-border-radius;

        &:hover {
          background: rgba($color-white-rgb, 0.2);
        }

        &.disabled {
          opacity: 30%;
        }
      }

      .dropdownIndicator {
        color: $color-white;
      }

      $secondary-reversed-focus-color: $color-blue-300;

      .focusedControl {
        border-color: $secondary-reversed-focus-color;

        &:hover {
          border-color: $secondary-reversed-focus-color;
        }
      }
    }
  }

  &.secondarySmall.secondarySmall {
    $secondary-small-select-height: 24px;

    &.reversed {
      .control {
        background: transparent;
        border: 0;

        &:hover {
          background: transparent;
        }
      }
    }

    .control {
      min-height: 0;
      height: auto;

      > div {
        // see note on > div within .notFullWidth below for explanation
        height: $secondary-small-select-height;
        padding-left: 0;
        padding-right: 0;
      }

      .valueContainer {
        height: $secondary-small-select-height;
      }

      .singleValue {
        font-family: $typography-paragraph-extra-small-font-family;
        font-weight: $typography-paragraph-extra-small-font-weight;
        font-size: $typography-paragraph-extra-small-font-size;
        line-height: $typography-paragraph-extra-small-line-height;
        letter-spacing: $typography-paragraph-extra-small-letter-spacing;
      }

      .singleValueOverrides {
        margin-left: 0;
        margin-right: 0;
      }
    }

    .indicatorsContainer {
      z-index: 1;
    }

    .dropdownIndicator {
      --icon-size: 14;

      padding-top: 0;
      padding-bottom: 0;
      transform: translateY(1px);

      // Usually reaching into the Icon component like this is a no-no, but
      // in this case we don't have access to the component in the middle which is
      // part of react-select. I thought this would be better than hacking the
      // structure of that component to allow one custom prop to trickle through.
      > svg {
        height: 14px;
        width: 14px;
      }
    }
  }

  &.notFullWidth {
    .control {
      display: inline-flex;
      max-width: 100%;

      > div {
        // If this CSS is removed, then the control becomes too tall when
        // it ellipsizes. It's strange, as the parent element is
        // display: inline-block, so you wouldn't expect it to have any affect,
        // but it works and was honesty a fluke from some unintentionally
        // leftover code when refactoring to support IE11 :shrug
        // I don't like the descendent selector, but there doesn't seem to be
        // a way to customise this element in react-select.
        height: 44px; // fixed height required for vertical centering, due to IE11 hack
        flex-wrap: nowrap;
        display: flex;
      }
    }

    .singleValueOverrides {
      overflow: hidden;
      position: static;
      white-space: nowrap;
      top: 0;
      transform: none;
      max-width: 100%;
    }

    .singleValue {
      max-width: 100%;
    }
  }
}
/* stylelint-enable no-descending-specificity */