/* Dropdowns: customizable <select> where supported, JS-built listbox (.select-ui, see select.js) elsewhere */
@layer components {
  .row .select-ui { inline-size: auto; flex: 1 1 14rem; }

  @supports (appearance: base-select) {
    select, select::picker(select) { appearance: base-select; }

    select {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      min-inline-size: 0;
      max-inline-size: 100%;
      cursor: pointer;

      & > button, & selectedcontent { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      &::picker-icon {
        content: "";
        inline-size: .45rem;
        block-size: .45rem;
        margin-block-start: -.2rem;
        border-inline-end: 2px solid var(--color-text-muted);
        border-block-end: 2px solid var(--color-text-muted);
        rotate: 45deg;
        transition: rotate var(--duration), margin var(--duration);
      }
      &:open::picker-icon { rotate: 225deg; margin-block-start: .2rem; }
    }

    select::picker(select) {
      min-inline-size: anchor-size(width);
      max-inline-size: min(32rem, 100vw - 1rem);
      max-block-size: min(20rem, 50dvh);
      margin-block: var(--space-1);
      padding: var(--space-1);
      background: var(--color-surface);
      color: var(--color-text);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-m);
      box-shadow: var(--shadow-raised);
      opacity: 0;
      translate: 0 -.25rem;
      transition: display var(--duration) allow-discrete, overlay var(--duration) allow-discrete, opacity var(--duration), translate var(--duration);
    }

    select:open::picker(select) {
      opacity: 1;
      translate: 0;

      @starting-style { opacity: 0; translate: 0 -.25rem; }
    }

    option {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-block-size: 2.25rem;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-s);
      cursor: pointer;

      &:is(:hover, :focus-visible) { background: var(--color-surface-subtle); outline: none; }
      &:checked { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
      &::checkmark { color: var(--color-accent); }
    }

    @media (prefers-reduced-motion: reduce) {
      select::picker(select), select::picker-icon { transition: none; }
    }
  }

  .select-ui { position: relative; inline-size: 100%; min-inline-size: 0; }

  button.select-trigger {
    inline-size: 100%;
    justify-content: space-between;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-field-border);
    padding-inline: var(--space-3);
    font-weight: 400;
    text-align: start;

    &:hover:not(:disabled) { background: var(--color-surface); color: var(--color-text); border-color: var(--color-text-muted); }
    &::after {
      content: "";
      flex-shrink: 0;
      inline-size: .45rem;
      block-size: .45rem;
      margin-block-start: -.2rem;
      border-inline-end: 2px solid var(--color-text-muted);
      border-block-end: 2px solid var(--color-text-muted);
      rotate: 45deg;
      transition: rotate var(--duration), margin var(--duration);
    }
    &[aria-expanded="true"]::after { rotate: 225deg; margin-block-start: .2rem; }
    &.invalid { border-color: var(--color-danger); }
  }

  .select-value { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .select-picker {
    position: fixed;
    inset: auto;
    margin: 0;
    max-inline-size: min(32rem, 100vw - 1rem);
    max-block-size: min(20rem, 50dvh);
    overflow-y: auto;
    padding: var(--space-1);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-raised);
    box-sizing: border-box;

    &:focus-visible { outline: none; }

    & [role="option"] {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-block-size: 2.25rem;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-s);
      cursor: pointer;
    }
    & [role="option"]::before { content: "✓"; content: "✓" / ""; inline-size: 1em; visibility: hidden; color: var(--color-accent); }
    & [role="option"][aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
    & [role="option"][aria-selected="true"]::before { visibility: visible; }
    & [role="option"]:hover, & [role="option"].active { background: var(--color-surface-subtle); }
    & [role="option"].active { outline: 2px solid var(--color-accent); outline-offset: -2px; }
    & [role="option"][aria-disabled="true"] { color: var(--color-text-muted); cursor: default; }
  }

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