@import "../tokens/colors";
@import "../tokens/border_radius";
@import "../tokens/spacing";
@import "../tokens/shadows";
@import "../tokens/positioning";

[class^=pb_typeahead_kit] {
  .typeahead-kit-select__option {
    cursor: pointer;
  }
  .pb_typeahead_wrapper {
    position: relative;

    .text_input_value_container{
      cursor: text;
    }
    .text_input_indicators,
    .pb_list_kit {
      cursor: pointer;
    }
    .pb_typeahead_loading_indicator {
      position: absolute;
      width: min-content;
      bottom: 0.6em;
      right: 1em;
      opacity: 0;
      color: $text_lt_light;
      transition: opacity .15s ease-in-out;
    }
  }
  [class^=pb_text_input_kit] {
    .text_input_wrapper {
      .text_input {
        max-height: none;
      }
      & > input:first-child {
        padding-right: $space_xl;
      }
    }
  }
  .pb_item_kit {
    padding: ($space_xs + 2) 0;

    @media (hover:hover) {
      &:hover {
        background-color: $bg_light;
      }
    }
  }
  [class^=pb_list_kit] {
    max-height: 18em;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: absolute;
    left: 0;
    right: 0;
    background: white;
    box-shadow: $shadow_deep;
    z-index: 100;
    border-radius: $border_rad_heavier;
    transition: opacity .25s ease-in-out;
  }
  &:focus-within [class^=pb_list_kit] {
    display: block;
    opacity: 1;
  }
  &:not(:focus-within) [class^=pb_list_kit] {
    display: none;
    opacity: 0;
  }
  [class^=pb_list_kit] {
    li {
      transition: background-color .25s ease-in-out;
    }
    & > [data-pb-typeahead-kit-results] > li {
      &:focus-within {
        background-color: $active_light;
      }
      > button {
        background: none;
        color: $text_lt_default;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
        width: 100%;
        height: 100%;
        text-align: left;
      }
    }
  }

  &.react-select, &.react-select .dark {
    .text_input {
      display: inherit;
      padding: 3px 4px;
      &_indicators {
        max-width: 70px;
      }
      &_value_container {
        flex-grow: 1;
        position: relative;
      }
    }
    .placeholder {
      position: absolute;
      margin-right: 2px;
      margin-left: 10px;
      top: 50%;
      transform: translateY(-50%);
      box-sizing: border-box;
    }
  }
  .placeholder+.input-wrapper .typeahead-plus-icon {
    display: none;
  }
  .text_input {
    .typeahead-kit-select {
      &__single-value{
        color: $text_lt_default;
      }
    }
    &.typeahead-kit-select {
      &__single-value{
        color: $text_lt_default;
      }
      &__control {
        &--is-focused {
          @include pb_textarea_focus;
          @include transition_default;
          border-color: $primary;
          background-color: rgba($focus_input_light,$opacity_5);
          box-shadow: none;
          .typeahead-plus-icon {
            display: none;
          }
        }
      }
    }
  }

  .typeahead-kit-select__menu {
    z-index: $z_1;
    .typeahead-kit-select__menu-list {
      padding: 0;
    }

    .typeahead-kit-select__option {
      &.typeahead-kit-select__option--is-focused {
        background-color: $hover_light;
      }
      &.typeahead-kit-select__option--is-selected {
        background-color: $primary;
      }
    }
  }
  .typeahead-plus-icon {
    color: $text_lt_lighter;
  }
  [class^=pb_badge_kit] span {
    line-height: 16.5px;
    letter-spacing: normal;
  }
  &.inline {
    &:not(:hover) {
      .text_input {
        border-color: transparent;
      }
      .text_input_indicators .css-tlfecz-indicatorContainer {
        color: transparent;
      }
    }
  }

  &[class*=dark] {
    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
      color: $text_dk_light;
    }
    .pb_text_input_kit_label {
      color: $text_dk_light;
    }
    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
      display: inherit !important;
    }
    .typeahead-kit-select__menu {
      background-color: $bg_dark;
      color: $white;
      z-index: $z_1;
      .typeahead-kit-select__menu-list {
        padding: 0;
      }
      .typeahead-kit-select__single-value {
        color: white;
      }

      .typeahead-kit-select__option {
        &.typeahead-kit-select__option--is-focused {
          background-color: $hover_dark;
        }
        &.typeahead-kit-select__option--is-selected {
          background-color: $active_dark;
        }
      }
    }
    .text_input_wrapper{
      color: text_dk_default;
    }
    .typeahead-kit-select__option:hover {
      background-color: $active_dark;
    }
    .typeahead-kit-select__indicator {
      color: $text_dk_default;
    }
    .typeahead-kit-select__indicator:hover {
      color: $text_dk_lighter;
    }
    .typeahead-kit-select__input {
      color: white;
      input:focus {
        box-shadow: none;
      }
    }
    .typeahead-kit-select__option--is-focused {
      background-color: $active_dark;
    }
    [class^=pb_list_kit] {
      background-color: $bg_dark;
    }
    .pb_item_kit {
      button {
        color: white !important;
      }
      @media (hover:hover) {
        &:hover {
          background-color: $hover_dark;
        }
      }
    }

    .text_input {
      .typeahead-kit-select__input-container{
        color: $text_dk_default
      }
      .typeahead-kit-select {
        &__single-value{
          color: $text_dk_default;
        }
      }
      &.typeahead-kit-select {
        &__single-value{
          color: $text_dk_default;
        }
        &__control {
          &--is-focused {
            @include pb_textarea_focus;
            @include transition_default;
            border-color: $active_dark;
            background-color: rgba($focus_input_dark,$opacity_5);
            box-shadow: none;
            .typeahead-plus-icon {
              display: none;
            }
          }
        }
      }
    }

    &.inline {
      &:not(:hover) {
        .text_input {
          background-color: transparent;
          border-color: transparent;
        }
        .typeahead-kit-select__indicator {
          color: transparent;
        }
      }

      &:hover {
        .text_input {
          background-color: $hover_dark;
        }
      }
    }

  }
}