// Select
//
// Replaces the default raect-select style with a custom one, mostly pulled
// from https://primer.github.io/.
//
// For detailed documentation on styling react-select see here:
// https://react-select.com/styles#the-unstyled-prop

@mixin hide-svg {
  svg {
    @extend .d-none;
  }
}

@mixin fa-based-remove-icon {
  @include hide-svg;
  @extend .text-secondary;
  @extend .fa;
  @extend .fa-times-circle;
}

.chemotion-select {
  position: relative;
  padding: 0 !important;
  &.is-invalid {
    .chemotion-select__control,
    .chemotion-select__control:hover {
      border-color: $danger;
    }
  }
  &__control,
  &__menu {
    @extend .d-block;
    font-family: $form-select-font-family;
    @include font-size($form-select-font-size);
    font-weight: $form-select-font-weight;
    line-height: $form-select-line-height;
    color: $form-select-color;
    background-color: $form-select-bg;
    border: $form-select-border-width solid $form-select-border-color;
    @include border-radius($form-select-border-radius, 0);
    @include box-shadow($form-select-box-shadow);
    appearance: none;
  }

  &__control {
    padding: $form-select-padding-y $form-select-padding-x;
    @extend .d-flex;
    @extend .justify-content-between;
    @extend .align-items-center;
    @extend .gap-1;
    min-height: auto !important;

    &:hover {
      border-color: $form-select-border-color;
    }

    &--menu-is-open {
      border-color: color("primary");
    }

    &:focus,
    &--is-focused {
      border-color: $input-focus-border-color;
      outline: 0;
      @if $enable-shadows {
        @include box-shadow(
          $form-select-box-shadow,
          $form-select-focus-box-shadow
        );
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: $form-select-focus-box-shadow;
      }
    }

    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: $form-select-padding-x;
      background-image: none;
    }

    &:disabled,
    &--is-disabled {
      color: $form-select-disabled-color;
      background-color: $form-select-disabled-bg;
      border-color: $form-select-disabled-border-color;
    }
  }

  &__value-container {
    @extend .text-nowrap;
    @extend .gap-1;
  }

  &__value-container.chemotion-select__value-container--is-multi {
    @extend .flex-wrap;
    @extend .text-wrap;
  }

  &__indicator,
  &__value-container,
  &__input-container,
  &__placeholder,
  &__single-value,
  &__indicator-separator {
    @extend .p-0;
    @extend .m-0;
  }

  &__single-value .badge {
    @extend .d-block;
  }

  &__indicator {
    &-separator {
      @extend .d-none;
    }

    &.chemotion-select__dropdown-indicator {
      @include hide-svg;
      width: 1rem;
      height: 1rem;
      background-image: escape-svg($form-select-indicator);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: $form-select-bg-size;
    }
  }

  &__menu {
    padding: $form-select-padding-y 0;
    box-shadow: none;
    z-index: 10;
  }

  &__option {
    padding: $form-select-padding-y $form-select-padding-x;

    &--is-selected,
    &--is-selected.chemotion-select__option--is-focused {
      background-color: $input-focus-border-color;
    }

    &--is-focused {
      background-color: $input-focus-border-color;
    }
  }

  &__multi-value {
    @extend .badge;
    @extend .rounded-pill;
    @extend .d-flex;
    @extend .align-items-center;
    @extend .gap-1;
    @extend .text-bg-light;
    @extend .border;
    @extend .border-opacity-25;
    @extend .pe-1;
    &__remove {
      @include fa-based-remove-icon;
    }
  }

  &__clear-indicator {
    @include fa-based-remove-icon;
  }

  // bootstrap sm size modification

  &.form-select-xxsm,
  &.form-select-xsm {
    .chemotion-select {
      &__indicator.chemotion-select__dropdown-indicator {
        background-size: 8px 6px;
        width: 0.5rem;
        height: 0.5rem;
      }
    }
  }

  &.form-select-xxsm .chemotion-select {
    &__control,
    &__menu {
      @include condensed-text-width;
      font-size: 12px;
      line-height: 1;
      border-radius: 2.5px;
    }
    &__control,
    &__option {
      padding: 3px 2px 3px 4px;
    }
    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: 4px;
    }
    &__menu {
      padding: 3px 0;
    }
  }

  &.form-select-xsm .chemotion-select {
    &__control,
    &__menu {
      @include condensed-text-width;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 3px;
    }
    &__control,
    &__option {
      padding: 1px 3px 1px 5px;
    }
    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: 5px;
    }
    &__menu {
      padding: 1px 0;
    }
  }

  &.form-select-sm .chemotion-select {
    &__control,
    &__menu {
      @include font-size($form-select-font-size-sm);
    }
    &__control,
    &__option {
      padding: $form-select-padding-y-sm 0.3rem $form-select-padding-y-sm
        $form-select-padding-x-sm;
    }
    &__indicator.chemotion-select__dropdown-indicator {
      background-size: 12px 9px;
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  // bootstrap lg size modification
  &.form-select-lg .chemotion-select {
    &__control,
    &__menu {
      @include font-size($form-select-font-size-lg);
    }
    &__control,
    &__option {
      padding: $form-select-padding-y-lg $form-select-padding-x-lg;
    }
    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: $form-select-padding-x-lg;
    }
    &__menu {
      padding: $form-select-padding-y-lg 0;
    }
  }
}

.select-in-inputgroup-text {
  &__control {
    @extend .d-flex;
    @extend .justify-content-between;
    @extend .align-items-center;
    @extend .gap-1;
    min-height: auto !important;

    &:hover {
      border-color: $form-select-border-color;
    }

    &--menu-is-open {
      border-color: color("primary");
    }

    &:focus,
    &--is-focused {
      border-color: $input-focus-border-color;
      outline: 0;
      @if $enable-shadows {
        @include box-shadow(
          $form-select-box-shadow,
          $form-select-focus-box-shadow
        );
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: $form-select-focus-box-shadow;
      }
    }
  }

  &__menu {
    padding: $form-select-padding-y 0;
    box-shadow: none;
    z-index: 10;
  }

  &__option {
    padding: $form-select-padding-y $form-select-padding-x;

    &--is-selected,
    &--is-selected.chemotion-select__option--is-focused {
      background-color: color("primary");
    }

    &--is-focused {
      background-color: $input-focus-border-color;
    }
  }
}

.select-in-inputgroup-text__control {
  min-height: 30px !important;
}

.select-in-inputgroup-text__menu-list {
  @extend .bg-white;
}

.select-in-inputgroup-text__option,
.select-in-inputgroup-text__menu-list {
  width: 160px;
  white-space: normal;
  text-align: left;
  overflow-x: hidden;
}
