$name: 'use-bootstrap-select';
$target: #{$name}-target;
$duplicate-transform: 'scale(1.1)';

// Hide target
.#{$target} {
  position: fixed;
  left: -9999rem;
  top: -9999rem;
}

.#{$name} {
  cursor: default;

  .input-wrapper {
    position: absolute;
    min-width: 4px;
    flex-grow: 1;
    white-space: nowrap;

    >span {
      visibility: hidden;
    }
  }

  input[type="text"] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    outline: 0;
    border: 0;
    width: 100%;
    background-color: transparent;
    cursor: default;
  }

  // Option inside optgroup
  .optgroup-item {
    padding-left: calc(var(--bs-dropdown-item-padding-x) * 2);
  }

  // Tags
  >div>div>.btn {
    border-radius: calc(#{$input-border-radius} - #{$input-border-width});
    overflow-wrap: anywhere;

    &.btn-sm {
      border-radius: calc(#{$input-border-radius-sm} - #{$input-border-width});
    }

    &.btn-lg {
      border-radius: calc(#{$input-border-radius-lg} - #{$input-border-width});
    }

    cursor: default;
  }

  // Keep the focus style. Source: bootstrap/scss/forms/_form-select.scss:29
  .form-select.focus {
    border-color: $form-select-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;
    }
  }

  // Disabled. Source: bootstrap/scss/forms/_form-select.scss:46
  .form-select.disabled {
    color: $form-select-disabled-color;
    background-color: $form-select-disabled-bg;
    border-color: $form-select-disabled-border-color;
  }

  // Dropdown-menu font sizes
  .form-select-sm+.dropdown-menu {
    @include font-size($form-select-font-size-sm);
  }

  .form-select-lg+.dropdown-menu {
    @include font-size($form-select-font-size-lg);
  }

  .dropdown-item {
    white-space: normal;
  }

  .dropdown-item:not(.active):hover {
    background-color: transparent;
  }

  >.dropdown-menu {
    overflow-y: auto;
  }
}

// Source: bootstrap/scss/mixins/_forms.scss:92
@mixin use-bootstrap-select-form-validation-state($state,
  $color,
  $icon,
  $tooltip-color: color-contrast($color),
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
  $border-color: $color) {
  .form-select {
    @include form-validation-state-selector($state) {
      +.#{$name}-wrapper .form-select {
        border-color: $border-color;

        @if $enable-validation-icons {

          &:not([multiple]):not([size]),
          &:not([multiple])[size="1"] {
            --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
            padding-right: $form-select-feedback-icon-padding-end;
            background-position: $form-select-bg-position, $form-select-feedback-icon-position;
            background-size: $form-select-bg-size, $form-select-feedback-icon-size;
          }
        }

        &.focus {
          border-color: $border-color;

          @if $enable-shadows {
            @include box-shadow($form-select-box-shadow, $focus-box-shadow);
          }

          @else {
            // Avoid using mixin so we can pass custom focus shadow properly
            box-shadow: $focus-box-shadow;
          }
        }
      }
    }
  }
}

// Source: bootstrap/scss/forms/_validation.css:9
@each $state,
$data in $form-validation-states {
  @include use-bootstrap-select-form-validation-state($state, $data...);
}