/* select.css: Select and combobox (component 4). Owner: group A (P2.T4). Tokens only, logical properties only.
   The trigger is the shared .text-input__control box (text-input.css); the list is a popover. */

.select__trigger { cursor: pointer; justify-content: space-between; user-select: none; }
.select__trigger[aria-expanded="true"] { border-color: var(--brand); }
.select__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-body); }
.select__placeholder { color: var(--text-muted); }
.select__trigger > .icon { flex: none; }

[data-disabled="true"] > .select__trigger,
.select__trigger[aria-disabled="true"] {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.select__trigger[aria-disabled="true"] .select__placeholder,
[data-disabled="true"] .select__placeholder { color: var(--text-disabled); }
[data-readonly="true"] > .select__trigger { background: var(--surface-sunken); border-color: var(--border); cursor: default; }

/* Multi: value chips inside the trigger, two lines at most then "+N". */
[data-component="select"][data-multiple="true"] .select__trigger { align-items: flex-start; padding-block: var(--space-2); min-block-size: var(--size-control); }
[data-component="select"][data-multiple="true"] .select__trigger > .icon,
[data-component="select"][data-multiple="true"] .select__trigger > .text-input__error-slot { align-self: center; }
.select__chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-inline-size: 0; min-block-size: var(--size-chip-control); }
.select__chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-block-size: var(--size-chip-control);
  max-inline-size: 100%;
  padding-inline-start: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-chip);
  color: var(--text);
  font: var(--type-label);
}
.select__chip-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__chip-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-chip-control);
  block-size: var(--size-chip-control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.select__chip-remove:hover { background: var(--border); color: var(--text); }
.select__more { padding-inline: var(--space-3); color: var(--text-secondary); }

/* The list: a popover surface. */
.select__list[data-overlay] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-inline-size: var(--w, var(--size-popover-sm));
  padding: var(--space-2);
  overflow: hidden;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  color: var(--text);
}
.select__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  min-block-size: var(--size-control-sm);
  margin-block-end: var(--space-2);
  padding-inline: var(--space-4);
  border-block-end: var(--border-width) solid var(--border);
  color: var(--text-secondary);
}
.select__search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: var(--size-control-sm);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: var(--type-body);
}
.select__search-input::-webkit-search-cancel-button { appearance: none; display: none; }
.select__search:has(.select__search-input:focus-visible) { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: calc(-1 * var(--border-width-thick)); border-radius: var(--radius-control); }
.select__listbox { flex: 1 1 auto; max-block-size: var(--size-listbox-max-h); overflow-y: auto; }
.select__group-label {
  display: flex;
  align-items: center;
  min-block-size: var(--size-header-slim);
  padding-inline: var(--space-4);
  font: var(--type-label);
  color: var(--text-secondary);
}
.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  min-block-size: var(--size-menu-item);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  font: var(--type-body);
  cursor: pointer;
}
.select__option-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__option .icon { flex: none; }
.select__option--create { justify-content: flex-start; color: var(--brand); }
.select__option:hover { background: var(--surface-hover); }
.select__option[aria-selected="true"] { background: var(--brand-subtle); color: var(--text); }
.select__option[aria-selected="true"] .icon { color: var(--brand); }
.select__option[data-active="true"] {
  background: var(--surface-hover);
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--border-width-thick));
}
.select__option[aria-selected="true"][data-active="true"] { background: var(--brand-subtle); }
.select__option[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.select__empty { padding: var(--space-3) var(--space-4); color: var(--text-secondary); font: var(--type-body); }

/* Loading: the Skeleton component's option rows (skeleton.css). */

/* Small width on a coarse pointer: a bottom sheet, options 44 tall. */
@media (width < 768px) and (pointer: coarse) {
  .select__list[data-overlay] {
    position: fixed;
    inset-block: auto 0;
    inset-inline: 0;
    inline-size: 100%;
    max-inline-size: none;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .select__option { min-block-size: var(--size-control-touch); }
  [data-component="select"][data-multiple="true"] .select__trigger { min-block-size: var(--size-control-touch); }
}