@use "tokens" as *;

// Select con buscador (combobox): cerrado parece un input; desplegado, un
// panel flotante con búsqueda y opciones (lista larga => scroll interno).
.search-select {
  position: relative;
  width: 100%;

  &__trigger {
    display: flex;
    align-items: center;
    gap: $space-2;
    width: 100%;
    background: $input-bg;
    border: 1px solid $input-border;
    border-radius: $input-radius;
    color: $input-text;
    cursor: pointer;
    height: $input-height;
    padding: 0 $input-padding-x;
    text-align: left;
    font: inherit;

    &:hover { border-color: $input-border-hover; }
  }

  &.is-open &__trigger {
    border-color: $input-border-focus;
  }

  &__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.is-placeholder { color: $input-placeholder; }
  }

  &__chevron {
    flex: 0 0 auto;
    color: $text-3;
    transition: transform 0.15s ease;
  }

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

  // Posición base (fallback sin Popover API): absoluto bajo el trigger. Al
  // abrir, useDropdownPanel lo promociona a la top layer (popover) y lo ancla
  // por coordenadas fijas: dentro de modales no lo recorta ningún overflow.
  &__dropdown {
    position: absolute;
    top: calc(100% + #{$space-1});
    left: 0;
    right: 0;
    z-index: 50;
    background: $surface;
    border: 1px solid $border-strong;
    border-radius: $radius-md;
    box-shadow: $shadow-md;
    overflow: hidden;
    display: grid;
  }

  &__input {
    width: 100%;
    background: $input-bg;
    border: 0;
    border-bottom: 1px solid $border;
    color: $input-text;
    height: $input-height;
    padding: 0 $input-padding-x;
    font: inherit;
    outline: none;

    &::placeholder { color: $input-placeholder; }
  }

  &__options {
    list-style: none;
    margin: 0;
    padding: $space-1;
    display: grid;
    gap: 1px;
    max-height: 240px;
    overflow-y: auto;
  }

  &__option {
    display: flex;
    align-items: center;
    gap: $space-2;
    width: 100%;
    background: none;
    border: 0;
    border-radius: $radius-sm;
    color: $text-1;
    cursor: pointer;
    padding: $space-2 $space-2;
    text-align: left;
    font-size: $fs-13;

    &:hover,
    &.is-highlighted { background: $surface-2; }

    &.is-active {
      background: color-mix(in srgb, $accent-500 14%, transparent);
      color: $accent-500;
      font-weight: $k-fw-semibold;
    }
  }

  &__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__empty {
    color: $text-3;
    font-size: $fs-13;
    padding: $space-2 $space-2;
  }

  &__more {
    display: flex;
    justify-content: center;

    button {
      background: none;
      border: 0;
      color: $accent-500;
      cursor: pointer;
      font-size: $fs-13;
      padding: $space-2;

      &:hover { text-decoration: underline; }
    }
  }
}