select[data-single-select]:not(:disabled) {
  cursor: pointer;
}

/* Native fallback keeps system picker behavior in older browsers and forced colors. */
@supports (appearance: base-select) and selector(::picker(select)) {
  @media (forced-colors: none) {
    select[data-single-select],
    select[data-single-select]::picker(select) {
      appearance: base-select;
    }

    select[data-single-select] {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    select[data-single-select]::picker-icon {
      flex: none;
      color: currentColor;
    }

    select[data-single-select]::picker(select) {
      margin-block: 4px;
      max-inline-size: calc(100vi - 16px);
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      overscroll-behavior: contain;
    }

    select[data-single-select] option {
      min-block-size: 36px;
      padding: 6px 10px;
      gap: 8px;
      border-radius: 8px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    select[data-single-select] option:checked {
      background: var(--selected);
    }

    select[data-single-select] option::checkmark {
      order: 1;
      margin-inline-start: auto;
      color: var(--primary);
    }

    select[data-single-select] option:disabled {
      color: var(--muted);
    }

    @media (hover: hover) {
      select[data-single-select] option:not(:disabled):not(:checked):hover {
        background: var(--soft);
      }
    }

    select[data-single-select] option:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: -2px;
    }

    @media (pointer: coarse) {
      select[data-single-select] option {
        min-block-size: 44px;
      }
    }
  }
}