// stylelint-disable selector-class-pattern

.d-select {
  --#{$prefix}select-gap: #{$spacer-2};

  // select
  --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
  --#{$prefix}select-menu-z-index: #{$zindex-dropdown};
  --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
  --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
  --#{$prefix}select-option-selected-bg: unset;
  --#{$prefix}select-option-selected-font-weight: var(--#{$prefix}fw-bold);
  --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
  --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
  --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-5);
  --#{$prefix}select-multi-value-padding: 0 var(--#{$prefix}ref-spacer-1) 0 var(--#{$prefix}select-gap);
  --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}select-gap);
  --#{$prefix}select-multi-value-background: var(--#{$prefix}secondary-100);
  --#{$prefix}select-multi-value-border-radius: #{$spacer-1};
  --#{$prefix}select-multi-value-label-color: var(--#{$prefix}secondary);
  --#{$prefix}select-multi-value-remove-color: var(--#{$prefix}secondary);
  --#{$prefix}select-multi-value-remove-hover-color: var(--#{$prefix}white);
  --#{$prefix}select-multi-value-remove-hover-background: var(--#{$prefix}primary);
  --#{$prefix}select-indicator-separator-width: 1px;
  --#{$prefix}select-indicator-separator-margin: var(--#{$prefix}ref-spacer-0) var(--#{$prefix}ref-spacer-1);
  --#{$prefix}select-indicator-separator-color: var(--#{$prefix}transparent);

  --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-5);
  --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-5);

  // focus
  &:focus-within {
    .input-group {
      border-color: var(--#{$prefix}input-focus-border-color);
      box-shadow: var(--#{$prefix}input-focus-box-shadow);
    }
  }

  .d-select-control {
    display: flex;
    flex-direction: column;
    gap: var(--#{$prefix}select-gap);
  }

  &.d-select-floating {
    label {
      position: absolute;
      top: 8px;
      left: 16px;
      z-index: 10;
      font-size: calc(var(--#{$prefix}body-font-size) * .85);
      color: rgba(var(--#{$prefix}body-color-rgb), .65);
    }
    .d-select__value-container {
      padding-top: 1rem;
    }
  }

  // input with elements
  .input-group {
    border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
    border-radius: var(--#{$prefix}input-border-radius);
  }

  // select control
  .d-select-component {
    border-radius: var(--#{$prefix}input-border-radius);
  }

  @each $state, $data in $form-validation-states {
    $border-color: map-get($data, "border-color");
    $tooltip-bg-color: map-get($data, "tooltip-bg-color");
    $box-shadow: map-get($data, "focus-box-shadow");
    $icon: map-get($data, "icon");

    .input-group:has(.d-select-component.is-#{$state}) {
      border-color: $border-color;

      .d-select__value-container {
        @if $enable-validation-icons {
          padding-right: $input-height-inner;
          background-image: $icon;
          background-repeat: no-repeat;
          background-position: right $input-height-inner-quarter center;
          background-size: $input-height-inner-half $input-height-inner-half;
        }
      }

      &:focus-within {
        box-shadow: $box-shadow;
      }

      ~ .form-text {
        color: $border-color;
      }
    }
  }

  .d-select__control {
    width: 100%;
    padding: $input-padding-y $input-padding-x;
    font-family: $input-font-family;
    @include rfs($input-font-size);
    font-weight: $input-font-weight;
    line-height: $input-line-height;
    color: $input-color;
    appearance: none; // Fix appearance for date inputs in Safari
    background-color: $input-bg;
    background-clip: padding-box;
    // border: $input-border-width solid $input-border-color;

    @include border-radius($input-border-radius, 0);

    @include transition($input-transition);

    // Customize the `:focus` state to imitate native WebKit styles.
    &:focus {
      color: $input-focus-color;
      background-color: $input-focus-bg;
      outline: 0;
    }
  }

  .d-select__placeholder {
    color: $input-placeholder-color;
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
    opacity: 1;
  }

  // select menu
  .d-select__menu-list {
    top: calc(var(--#{$prefix}input-border-width) * 2);
    z-index: var(--#{$prefix}select-menu-z-index);
    margin: calc(var(--#{$prefix}input-border-width) * -1);
    background: $input-bg;
    border-radius: var(--#{$prefix}input-border-radius);
    box-shadow: var(--#{$prefix}select-menu-shadow);
  }

  .d-select__control--menu-is-open .d-select__dropdown-indicator {
    transform: rotateX(180deg);
  }

  // select option
  .d-select__option {
    display: block;
    padding: $input-padding-y $input-padding-x;
  }

  .d-select__option--is-focused {
    background: var(--#{$prefix}select-option-focus-bg);
  }

  .d-select__option--is-selected {
    font-weight: var(--#{$prefix}select-option-selected-font-weight);
    color: var(--#{$prefix}select-option-selected-color);
    background: var(--#{$prefix}select-option-selected-bg);

    &:hover {
      --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
    }
  }

  // select option with checkbox
  .d-select__option--is-checkbox {
    padding: 0;

    > label {
      width: 100%;
      padding: $input-padding-x;
    }

    .form-check-input {
      margin-right: $input-padding-x;
    }
  }

  .d-select__option--is-checkbox label {
    font-size: var(--#{$prefix}select-option-is-checkbox-font-size);
    font-weight: var(--#{$prefix}select-option-is-checkbox-font-weight);
    color: var(--#{$prefix}select-option-is-checkbox-color);
  }

  // select multi control
  .d-select__multi-value {
    margin-right: var(--#{$prefix}select-multi-value-margin-right);
    background: var(--#{$prefix}select-multi-value-background);
    border-radius: var(--#{$prefix}select-multi-value-border-radius);
  }

  .d-select__multi-value__label {
    padding: var(--#{$prefix}select-multi-value-padding);
    color: var(--#{$prefix}select-multi-value-label-color);
  }

  .d-select__multi-value__remove {
    color: var(--#{$prefix}select-multi-value-remove-color);

    &:hover {
      color: var(--#{$prefix}select-multi-value-remove-hover-color);
      background-color: var(--#{$prefix}select-multi-value-remove-hover-background);
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }

  .d-select__control--has-icon,
  .d-select__option--has-icon {
    display: flex;
    flex-direction: row;
    gap: $input-padding-x;
    align-items: center;
    white-space: nowrap;

    .d-icon {
      --bs-icon-size: var(--#{$prefix}select-option-has-icon-icon-size);
    }
  }

  .d-select__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--#{$prefix}select-indicator-width);
    height: var(--#{$prefix}select-indicator-height);

    .d-icon {
      --bs-icon-component-size: var(--#{$prefix}select-indicator-width);
    }
  }

  .d-select__indicators {
    .d-select__indicator-separator {
      width: var(--#{$prefix}select-indicator-separator-width);
      margin: var(--#{$prefix}select-indicator-separator-margin);
      background-color: var(--#{$prefix}select-indicator-separator-color);

      &:not(:first-child) {
        --#{$prefix}select-indicator-separator-color: var(--#{$prefix}gray-100);
      }
    }
  }


  &.disabled .d-select__control {
    background: var(--#{$prefix}input-disabled-bg);
  }

  &.disabled .input-group {
    border-color: var(--#{$prefix}input-disabled-border-color);
  }

  &.disabled .d-select__single-value {
    color: var(--#{$prefix}input-disabled-color);
  }

  &.disabled .d-icon {
    --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
  }
}