/* select - shared primitive, themed by the active language's tokens.

   Presentational only. A native <select> is used deliberately: it is accessible,
   keyboard-navigable, and correct on touch for free. Reach for a headless
   listbox (Radix, Ark) only when you genuinely need custom option rendering,
   then apply .nx-select to its trigger.

   The chevron is drawn with a background gradient rather than an icon so the
   primitive stays a single CSS file with no asset dependency. */

/* Field wrapper, intentionally duplicated from the input primitive.

   Primitives are copied one at a time: `nodex add select` must produce
   something that works on its own. Referencing a class defined in a sibling
   primitive's stylesheet would hand the consumer markup with no styles for it.
   Identical definitions collapse harmlessly if both are installed. */

.nx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--nx-font-sans);
}

.nx-field__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-muted);
}

.nx-select {
  appearance: none;
  width: 100%;
  padding: 0.6em 2.2em 0.6em 0.95em;
  border: var(--nx-hairline) solid var(--nx-grid);
  border-radius: var(--nx-radius-pill);
  background-color: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-sans);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  /* Two 1px bars rotated into a chevron. Sized to the hairline scale so it
     matches the weight of everything else in the language. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 15px) center,
    calc(100% - 11px) center;
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
  transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nx-select:hover {
  border-color: var(--nx-muted);
}

.nx-select:focus {
  outline: none;
  border-color: var(--nx-ink);
}

.nx-select:focus-visible {
  outline: var(--nx-hairline) solid var(--nx-ink);
  outline-offset: 2px;
}

.nx-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Auto-width variant, for filter bars where a full-width control would be odd. */
.nx-select--auto {
  width: auto;
}

/* The dropdown list.

   A native picker is drawn by the operating system, and the only properties
   that reliably cross browsers are these. Set them so the list at least carries
   the language's paper, ink, and face instead of the OS default. */
.nx-select option {
  background-color: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-sans);
}

/* Where the customizable select API exists, the picker stops being an OS
   surface and becomes a real element we can style like anything else.
   Browsers without it keep the block above and the CSS-drawn chevron, which is
   why this is layered rather than replacing them. */
@supports (appearance: base-select) {
  .nx-select,
  .nx-select::picker(select) {
    appearance: base-select;
  }

  .nx-select {
    /* base-select supplies its own layout, so the gradient chevron and the
       padding reserved for it are no longer needed. */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7em;
    padding-right: 0.95em;
    background-image: none;
  }

  /* A hairline chevron, at the language's stroke weight rather than a glyph. */
  .nx-select::picker-icon {
    content: '';
    width: 5px;
    height: 5px;
    border-right: var(--nx-hairline) solid currentColor;
    border-bottom: var(--nx-hairline) solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Motivated motion: the chevron points where the list now is. */
  .nx-select:open::picker-icon {
    transform: translateY(1px) rotate(-135deg);
  }

  .nx-select::picker(select) {
    background: var(--nx-bg);
    border: var(--nx-hairline) solid var(--nx-grid);
    border-radius: var(--nx-radius-card);
    padding: 6px;
    margin-top: 6px;
    /* No shadow: this language has no elevation model. The hairline separates. */
    box-shadow: none;
  }

  .nx-select option {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: var(--nx-radius-pill);
    background: transparent;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
  }

  .nx-select option:hover,
  .nx-select option:focus {
    background: color-mix(in oklab, var(--nx-grid) 55%, transparent);
    outline: none;
  }

  /* Selection reads by weight, consistent with how the table marks a total. */
  .nx-select option:checked {
    font-weight: 700;
  }

  /* The default checkmark is a glyph from the OS. Replace it with a mark that
     belongs to the language, and move it to the end of the row. */
  .nx-select option::checkmark {
    order: 1;
    margin-left: auto;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nx-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-select {
    transition: none;
  }

  .nx-select::picker-icon {
    transition: none;
  }
}