// ============================================
// FORM SELECT STYLES
// ============================================

$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23343a40' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' /></svg>");
$form-select-indicator-disabled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23adb5bd' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' /></svg>");

// ─── Base ────────────────────────────────────
.form-select {
  min-height: 2rem;
  position: relative;
  border-color: $neutral-400;
  margin-bottom: 0;

  // Layer 1: chevron arrow  |  Layer 2: animated underline (starts at 0 width)
  background-image:
    $form-select-indicator,
    linear-gradient(to right, $neutral-950 0%, $neutral-950 100%);
  background-size: 24px 24px, 0% 2px;
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.75rem center, center bottom;
  transition:
    background-size 0.3s ease-in-out,
    border-color 0.15s ease-in-out;

  [dir="rtl"] & {
    background-position: left 0.5rem center, center bottom;
    padding-left: 1.75rem;
    padding-right: 0.75rem;
  }

  option {
    background-color: $white;
    color: $black;
    padding: 0.5rem;
  }

  &:has(option:disabled:checked) {
    color: $neutral-500;
    &:hover { color: $neutral-500; }
    option:disabled:checked { color: $neutral-500; }
  }

  // ── Interactive states ─────────────────────
  &:hover {
    border-color: $neutral-500;
    color: $black;
  }

  &:active {
    border-color: $neutral-950;
    background-color: $neutral-100;
    background-size: 24px 24px, 100% 2px;
    color: $black;
  }

  &:focus-visible,
  &:focus {
    border-color: $neutral-700;
    background-size: 24px 24px, 100% 2px;
    outline: none !important;
    box-shadow: $box-shadow;
  }

  &[readonly] {
    border-color: $neutral-300;
    color: $black;
    pointer-events: none;
  }

  &:disabled,
  &[disabled] {
    border-color: $neutral-300;
    background-color: var(--#{$prefix}body-bg);
    background-image:
      $form-select-indicator-disabled,
      linear-gradient(to right, transparent 0%, transparent 100%);
    color: $neutral-400;
    pointer-events: none;
  }

  // ── Validation: invalid ────────────────────
  &.is-invalid,
  &:user-invalid {
    border-color: $error-700;
    background-image:
      $form-select-indicator,
      linear-gradient(to right, $error-700 0%, $error-700 100%);
    background-size: 24px 24px, 100% 2px;

    &:hover { border-color: $error-700; }

    &:focus-visible,
    &:focus {
      border-color: $error-700;
      background-size: 24px 24px, 100% 2px;
    }

    &:disabled,
    &[disabled] {
      border-color: $neutral-300;
      background-image:
        $form-select-indicator-disabled,
        linear-gradient(to right, transparent 0%, transparent 100%);
      background-size: 24px 24px, 0% 2px;
    }
  }

  // ── Validation: valid ──────────────────────
  &.is-valid {
    border-color: $success-600;
    background-image:
      $form-select-indicator,
      linear-gradient(to right, $success-600 0%, $success-600 100%);
    background-size: 24px 24px, 100% 2px;

    &:hover { border-color: $success-600; }

    &:focus-visible,
    &:focus {
      border-color: $success-600;
      background-size: 24px 24px, 100% 2px;
    }

    &:disabled,
    &[disabled] {
      border-color: $neutral-300;
      background-image:
        $form-select-indicator-disabled,
        linear-gradient(to right, transparent 0%, transparent 100%);
      background-size: 24px 24px, 0% 2px;
    }
  }
}

// ─── Size overrides ───────────────────────────
.form-select-lg { min-height: 2.5rem; }
.form-select-sm { min-height: 1.5rem; }

// ─── Wrapper: animated rotating arrow + underline ──────────
// Wrap any .form-select in .select-wrapper to get:
//   • smooth 180° chevron rotation on focus/open
//   • centre-expanding underline that follows the element's own border-radius
//   • full validation-state colouring
.select-wrapper {
  position: relative;
  width: 100%;
  display: block;

  // ── Rotating arrow ──────────────────────────
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%) rotate(0deg);
    width: 24px;
    height: 24px;
    background-image: $form-select-indicator;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    transition: transform 0.2s ease-in-out;
    pointer-events: none;
  }

  &:focus-within::after { transform: translateY(-50%) rotate(180deg); }

  [dir="rtl"] &::after { right: auto; left: 0.75rem; }

  // ── The select provides the underline via its own background-image ──
  // (same technique as .form-control — gradient lives inside the element
  //  so it naturally clips to the element's border-radius)
  .form-select {
    --#{$prefix}form-select-bg-img: none;        // suppress Bootstrap's arrow CSS-var
    --#{$prefix}form-select-bg-icon: none;
    background-image:
      linear-gradient(to right, $neutral-950 0%, $neutral-950 100%) !important;
    background-size: 0% 2px !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    transition:
      background-size 0.3s ease-in-out,
      border-color 0.15s ease-in-out !important;
  }

  // Focus: expand underline
  &:focus-within .form-select {
    background-size: 100% 2px !important;
  }

  // ── Validation states ──────────────────────
  &:has(.form-select.is-invalid) .form-select,
  &:has(.form-select:user-invalid) .form-select {
    background-image:
      linear-gradient(to right, $error-700 0%, $error-700 100%) !important;
    background-size: 100% 2px !important;
  }

  &:has(.form-select.is-valid) .form-select {
    background-image:
      linear-gradient(to right, $success-600 0%, $success-600 100%) !important;
    background-size: 100% 2px !important;
  }

  // ── Disabled ──────────────────────────────
  &:has(.form-select:disabled),
  &:has(.form-select[disabled]) {
    pointer-events: none;

    &::after { background-image: $form-select-indicator-disabled; }

    .form-select {
      background-image:
        linear-gradient(to right, transparent 0%, transparent 100%) !important;
      background-size: 0% 2px !important;
    }
  }
}

// .select-wrapper used inside Bootstrap .input-group
.input-group .select-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

// ─── Special class: Dropdown Toggle styled as Form Select ───
.form-select-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;

  min-height: 2rem;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: $black !important;
  background-color: var(--#{$prefix}body-bg) !important;
  border: 1px solid $neutral-400 !important;
  border-radius: $radius-sm;

  background-image: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%) !important;
  background-size: 0% 2px !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  transition: background-size 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.15s ease-in-out;

  &:hover {
    border-color: $black !important;
    color: $black !important;
    background-color: var(--#{$prefix}body-bg) !important;
  }

  &:active,
  &:focus,
  &.show {
    border-color: $neutral-400 !important;
    background-color: $neutral-100 !important;
    color: $black !important;
    background-size: 100% 2px !important;
    box-shadow: none !important;
    outline: none !important;
  }

  &:focus-visible {
    border-color: $neutral-700 !important;
    outline: none !important;
    box-shadow: $box-shadow !important;
  }
}