/* Native picker, shared control. Consumers set placement and optional tokens. */
.ui-select {
  position: relative;
  display: inline-grid;
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--ui-select-ink, var(--ink));
  vertical-align: middle;
}
.ui-select > select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 44px;
  margin: 0;
  padding-block: 10px;
  padding-inline: 13px 42px;
  border: 1px solid var(--ui-select-line, var(--line));
  border-radius: var(--ui-select-radius, 10px);
  background: var(--ui-select-background, var(--surface));
  color: inherit;
  font: inherit;
  font-size: var(--ui-select-font-size, 13px);
  line-height: 1.4;
  cursor: pointer;
  touch-action: manipulation;
}
.ui-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 17px;
  top: 50%;
  inline-size: 7px;
  block-size: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ui-select > select:hover:not(:disabled) { border-color: var(--ui-select-focus, var(--accent)); }
.ui-select > select:focus-visible { outline: 2px solid var(--ui-select-focus, var(--accent)); outline-offset: 2px; }
.ui-select > select:disabled { cursor: not-allowed; opacity: .55; }
.ui-select:has(> select:disabled)::after { opacity: .55; }
.ui-select > select option { background: var(--ui-select-option-background, var(--surface)); color: var(--ink); }
@media (forced-colors: active) {
  .ui-select > select { appearance: auto; -webkit-appearance: auto; padding-inline-end: 13px; color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  .ui-select::after { display: none; }
}