@use '../../theme/styles' as theme;
@use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode

.wr-select {
  --wr-select-color: var(--wr-color-dark);
  --wr-select-bg: var(--wr-color-white);
  --wr-select-border: var(--wr-color-light);
  --wr-select-radius: var(--wr-control-radius-md);
  --wr-select-padding-y: var(--wr-control-padding-y-md);
  --wr-select-padding-x: var(--wr-control-padding-x-md);
  --wr-select-font-size: var(--wr-control-font-size-md);
  --wr-select-line-height: var(--wr-control-line-height-md);

  display: inline-flex;
  vertical-align: middle;

  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Multi/tag
  // min-height and the search/tag inputs all read these vars, so every mode
  // tracks the size. Declared before `--rounded` so the pill modifier wins.
  &--sm {
    --wr-select-radius: var(--wr-control-radius-sm);
    --wr-select-padding-y: var(--wr-control-padding-y-sm);
    --wr-select-padding-x: var(--wr-control-padding-x-sm);
    --wr-select-font-size: var(--wr-control-font-size-sm);
    --wr-select-line-height: var(--wr-control-line-height-sm);
  }

  &--lg {
    --wr-select-radius: var(--wr-control-radius-lg);
    --wr-select-padding-y: var(--wr-control-padding-y-lg);
    --wr-select-padding-x: var(--wr-control-padding-x-lg);
    --wr-select-font-size: var(--wr-control-font-size-lg);
    --wr-select-line-height: var(--wr-control-line-height-lg);
  }

  &--rounded {
    --wr-select-radius: var(--wr-border-radius-pill);
    --wr-select-padding-x: 1rem;
    corner-shape: round; // override squircle from smooth-br for pills
  }

  &--disabled {
    --wr-select-color: var(--wr-color-medium);
    --wr-select-bg: rgba(var(--wr-color-light-rgb), 0.35);
  }

  &__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 10rem;
    appearance: none;
    background: var(--wr-select-bg);
    color: var(--wr-select-color);
    border: 1px solid var(--wr-select-border);
    @include theme.smooth-br(var(--wr-select-radius));
    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1))
      calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-select-font-size);
    line-height: var(--wr-select-line-height);
    cursor: pointer;
    text-align: left;
    transition:
      border-color var(--wr-transition-base),
      box-shadow var(--wr-transition-base);

    &:focus-visible {
      border-color: var(--wr-color-primary);
      @include theme.focus-ring;
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  &--open &__trigger {
    border-color: var(--wr-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
  }

  &__value,
  &__placeholder {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__placeholder {
    color: var(--wr-color-text-muted);
  }

  &__chevron {
    --wr-icon-size: 1rem;
    flex: 0 0 auto;
    color: var(--wr-color-medium);
    transition: transform var(--wr-transition-base);
  }

  &--open &__chevron {
    transform: rotate(180deg);
  }

  // Multi-mode trigger chrome
  // Chips fill the trigger's flex row; the trigger grows vertically as
  // needed. A clear-all (×) button appears at the row's tail.

  &--multi &__trigger,
  &--tag &__trigger {
    flex-wrap: wrap;
    align-items: center;
    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
    // Empty / single chip-row floor = single-mode height
    // (line-height + 2×padding-y + 2×1px border), so every size + density lines up.
    min-height: calc(var(--wr-select-line-height) + var(--wr-select-padding-y) * var(--wr-density-y, 1) * 2 + 2px);
  }

  // Search-mode trigger: inline text input + chevron + clear
  &__trigger--search {
    cursor: text;
    padding: 0;

    &:focus-within {
      border-color: var(--wr-color-primary);
      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
    }
  }

  &__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--wr-select-font-size);
    line-height: var(--wr-select-line-height);

    &::placeholder {
      color: var(--wr-color-text-muted);
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  // Tag-mode trigger: focusable div hosting chips + inline input.
  &__trigger--tag {
    cursor: text;

    &:focus-within {
      border-color: var(--wr-color-primary);
      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
    }
  }

  &__tag-input {
    flex: 1 0 6rem;
    min-width: 4rem;
    border: 0;
    outline: 0;
    padding: 0.125rem 0.25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--wr-select-font-size);
    line-height: var(--wr-select-line-height);

    &::placeholder {
      color: var(--wr-color-text-muted);
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  &__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
  }

  &__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    max-width: 100%;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--wr-color-primary-soft);
    color: var(--wr-color-primary);
    font-size: var(--wr-text-sm);
    line-height: 1.4;
    user-select: none;
  }

  &__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__chip-remove {
    --wr-icon-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease;

    &:hover {
      background: var(--wr-color-primary-active);
    }
  }

  &__chip--more {
    background: rgba(var(--wr-color-dark-rgb), 0.08);
    color: rgba(var(--wr-color-dark-rgb), 0.7);
  }

  &__clear {
    --wr-icon-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-right: -0.25rem;
    border-radius: 999px;
    color: var(--wr-color-medium);
    cursor: pointer;
    transition:
      background 0.12s ease,
      color 0.12s ease;

    &:hover {
      background: rgba(var(--wr-color-dark-rgb), 0.06);
      color: var(--wr-color-dark);
    }
  }
}

.wr-select-overlay {
  padding-top: 0.25rem;
}

.wr-select-panel {
  --wr-select-panel-bg: var(--wr-color-white);
  --wr-select-panel-border: var(--wr-color-light);
  --wr-select-panel-radius: var(--wr-border-radius-base);
  --wr-select-panel-shadow: var(--wr-shadow-overlay);
  --wr-select-panel-max-height: 16rem;
  // Option sizing — default md. --sm/--lg are set from the trigger size because
  // the panel is portaled into an overlay and can't inherit the host size class.
  --wr-option-font-size: var(--wr-control-font-size-md);
  --wr-option-line-height: var(--wr-control-line-height-md);
  --wr-option-padding-y: 0.4375rem;
  --wr-option-padding-x: 0.625rem;
  --wr-option-gap: 0.1875rem;

  display: flex;
  flex-direction: column;
  // Fill the overlay pane so the visible panel == the pointer-catching surface;
  // no transparent gutter to swallow outside-clicks (see openOverlay in select.ts).
  width: 100%;
  gap: var(--wr-option-gap);
  background: var(--wr-select-panel-bg);
  border: 1px solid var(--wr-select-panel-border);
  @include theme.smooth-br(var(--wr-select-panel-radius));
  box-shadow: var(--wr-select-panel-shadow);
  padding: 0.25rem;
  max-height: var(--wr-select-panel-max-height);
  overflow-y: auto;
  font-family: var(--wr-font-family-base);

  &--sm {
    --wr-option-font-size: var(--wr-control-font-size-sm);
    --wr-option-line-height: var(--wr-control-line-height-sm);
    --wr-option-padding-y: 0.3125rem;
    --wr-option-padding-x: 0.5rem;
    --wr-option-gap: 0.125rem;
  }

  &--lg {
    --wr-option-font-size: var(--wr-control-font-size-lg);
    --wr-option-line-height: var(--wr-control-line-height-lg);
    --wr-option-padding-y: 0.5rem;
    --wr-option-padding-x: 0.75rem;
    --wr-option-gap: 0.25rem;
  }

  &__loading,
  &__empty {
    padding: 0.625rem 0.75rem;
    color: var(--wr-color-medium);
    font-size: var(--wr-option-font-size);
    text-align: center;
  }
}

.wr-option {
  display: flex;
  align-items: center;
  padding: var(--wr-option-padding-y) var(--wr-option-padding-x);
  border-radius: var(--wr-border-radius-sm);
  color: var(--wr-color-dark);
  font-size: var(--wr-option-font-size);
  line-height: var(--wr-option-line-height);
  cursor: pointer;
  user-select: none;
  transition: background var(--wr-transition-short);

  &:hover {
    background: var(--wr-color-hover);
  }

  &--selected {
    background: var(--wr-color-primary-soft);
    color: var(--wr-color-primary);
    font-weight: 500;
  }

  &--disabled {
    color: var(--wr-color-medium);
    cursor: not-allowed;
    opacity: 0.6;

    &:hover {
      background: transparent;
    }
  }

  // Search-mode filter — out-of-match options collapse but stay in the
  // DOM so registration order survives the panel re-open.
  &--hidden {
    display: none;
  }
}

.wr-option-group {
  display: flex;
  flex-direction: column;
  gap: var(--wr-option-gap);

  &__label {
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--wr-color-medium);
    font-size: var(--wr-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  + .wr-option-group {
    border-top: 1px solid var(--wr-color-light);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }
}

// Touch pointers: grow the chip removes / clear button and open up the chip
// rows so each is a comfortable tap target without overlapping its neighbour.
// The removes reach ~32px in a ~44px-tall chip; fine pointers keep the
// compact desktop sizing above.
@media (pointer: coarse) {
  .wr-select__chips {
    gap: 0.375rem;
  }

  .wr-select__chip {
    gap: 0.375rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  }

  .wr-select__chip-remove,
  .wr-select__clear {
    --wr-icon-size: 1.125rem;
    width: 2rem;
    height: 2rem;
  }

  .wr-select__clear {
    margin-right: 0;
  }
}