/*
Combobox

<div class="combobox-root" data-combobox-root>                   the control's box
  <div class="combobox-control" data-combobox-control data-popup-open>   input chrome, the anchor
    <div class="combobox-values">                                   one line of chips and the input
    <span class="combobox-chip" tabindex="-1" data-value>          multiple: one per value
      <span class="combobox-chip-label">  <button class="combobox-chip-remove">
    <input class="combobox-input" role="combobox">
    <button class="combobox-clear" data-visible>                   space always reserved
    <button class="combobox-trigger">                               the chevron
  <input class="combobox-form-input">                              form value, visually hidden
  <div class="combobox-content" popover="manual" data-state data-side data-empty>
    <div class="combobox-list" role="listbox">
      <div class="combobox-item" role="option" data-highlighted data-selected hidden?>
        <span class="combobox-item-text">  <span class="combobox-item-indicator">
      <div class="combobox-group" role="group">  <div class="combobox-label">
      <div class="combobox-separator">
    <div class="combobox-empty">  <div class="combobox-loading">

The clear button keeps its space while hidden, chips wrap inside the
control's one line, which scrolls sideways (or wraps, with chipsWrap), and the
popup's empty and loading rows replace the list inside the popup.
*/

@layer components {

.combobox-root {
  position:       relative;
  display:        inline-flex;
  width:          var(--space-64);
  max-width:      100%;
  vertical-align: middle;
}

.combobox-root.is-block {
  display: flex;
  width:   100%;
}

/* Control */

.combobox-control {
  display:        flex;
  flex-wrap:      nowrap;
  align-items:    center;
  gap:            var(--space-1);
  box-sizing:     border-box;
  width:          100%;
  min-height:     var(--control-height);
  padding-block:  calc((var(--control-height) - var(--tag-height)) / 2 - var(--control-border-width));
  padding-inline: var(--control-padding-x) var(--space-1);
  border:         var(--control-border-width) solid var(--control-border);
  border-radius:  var(--radius-control);
  background:     var(--control-bg);
  box-shadow:     var(--control-shadow);
  color:          var(--ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-ui);
  font-weight:    var(--weight-body);
  letter-spacing: var(--tracking-ui);
  line-height:    var(--leading-snug);
  cursor:         text;
  transition:     border-color var(--duration-fast) var(--ease-out),
                  box-shadow var(--duration-fast) var(--ease-out);
}

.combobox-control.is-multiple {
  padding-inline-start: calc((var(--control-height) - var(--tag-height)) / 2);
}

.combobox-control.is-sm {
  min-height:     var(--control-height-sm);
  padding-block:  calc((var(--control-height-sm) - var(--tag-height)) / 2 - var(--control-border-width));
  padding-inline-start: var(--control-padding-x-sm);
  font-size:      var(--text-ui-sm);
}

.combobox-control.is-lg {
  min-height:     var(--control-height-lg);
  padding-block:  calc((var(--control-height-lg) - var(--tag-height)) / 2 - var(--control-border-width));
  padding-inline-start: var(--control-padding-x-lg);
  font-size:      var(--text-ui-lg);
}

.combobox-control:hover:not([data-disabled], :disabled, :has(.combobox-input:disabled)) {
  border-color: var(--rule-strong);
}

.combobox-control:has(.combobox-input:focus-visible) {
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

.combobox-control[data-invalid] {
  border-color: var(--danger);
}

.combobox-control[data-invalid]:has(.combobox-input:focus-visible) {
  box-shadow: var(--focus-ring-danger);
}

/* Disabled is the effective state: the disabled prop, or a disabled Field or
   <fieldset disabled> that disables the input or the trigger button. */
.combobox-control:is([data-disabled], :disabled, :has(.combobox-input:disabled)) {
  cursor:     not-allowed;
  opacity:    var(--opacity-disabled);
  background: var(--bg-soft);
}

.combobox-control[data-readonly] {
  background: var(--bg-soft);
}

/* Chips and the input share one line that scrolls sideways, so picking a
   value never makes the control taller. chipsWrap opts into wrapping. */
.combobox-values {
  display:         flex;
  flex:            1 1 auto;
  align-items:     center;
  gap:             var(--space-1);
  min-width:       0;
  overflow-x:      auto;
  overflow-y:      hidden;
  scrollbar-width: none;
}

.combobox-values::-webkit-scrollbar {
  display: none;
}

.combobox-control.is-wrap .combobox-values {
  flex-wrap: wrap;
  overflow:  visible;
}

.combobox-chip {
  flex: none;
}

.combobox-input {
  flex:           1 1 var(--space-16);
  min-width:      var(--space-12);
  height:         var(--tag-height);
  margin:         0;
  padding:        0;
  border:         0;
  background:     transparent;
  box-shadow:     none;
  color:          inherit;
  font:           inherit;
  letter-spacing: inherit;
  outline:        none;
}

.combobox-input:focus,
.combobox-input:focus-visible {
  outline:    none;
  box-shadow: none;
  border:     0;
}

.combobox-input::placeholder {
  color:   var(--ink-dim);
  opacity: 1;
}

.combobox-input:disabled {
  cursor: not-allowed;
}

/* Clear and trigger: small square ghost buttons at the end. */
.combobox-clear,
.combobox-trigger {
  display:         inline-flex;
  flex:            none;
  align-items:     center;
  justify-content: center;
  width:           var(--tag-height);
  height:          var(--tag-height);
  margin:          0;
  padding:         0;
  border:          0;
  border-radius:   var(--radius-item);
  background:      transparent;
  color:           var(--ink-dim);
  cursor:          pointer;
}

.combobox-clear:hover,
.combobox-trigger:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.combobox-clear:focus-visible,
.combobox-trigger:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.combobox-clear:not([data-visible]) {
  visibility: hidden;
}

.combobox-clear .icon,
.combobox-trigger .icon {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.combobox-control:is([data-disabled], :has(.combobox-input:disabled)) :is(.combobox-clear, .combobox-trigger) {
  cursor: not-allowed;
}

/* Addon */

/* slot "start": an icon or text inside the chrome, before the chips and the
   input (shadcn Input Group). It takes no room when the slot is empty. */
.combobox-addon {
  display:     inline-flex;
  flex:        none;
  align-items: center;
  gap:         var(--space-1);
  color:       var(--ink-dim);
}

.combobox-addon:not(:has(*)) {
  display: none;
}

.combobox-addon .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

/* Popup Trigger (inputInPopup) */

/* The trigger is a button wearing the control's chrome; the value or the
   placeholder fills it and the chevron sits at the end. */
.combobox-control.is-trigger {
  justify-content: space-between;
  gap:             var(--space-2);
  margin:          0;
  padding-inline:  var(--control-padding-x) calc(var(--control-padding-x) - var(--space-1));
  text-align:      start;
  cursor:          pointer;
}

.combobox-control.is-trigger:focus-visible {
  outline:      none;
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

.combobox-control.is-trigger[data-invalid]:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

.combobox-control.is-trigger:disabled {
  cursor: not-allowed;
}

.combobox-trigger-value {
  flex:          1 1 auto;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.combobox-control.is-trigger[data-placeholder] .combobox-trigger-value {
  color: var(--ink-dim);
}

.combobox-trigger-icon {
  display:         inline-flex;
  flex:            none;
  align-items:     center;
  justify-content: center;
  width:           var(--tag-height);
  height:          var(--tag-height);
  color:           var(--ink-dim);
}

.combobox-trigger-icon .icon {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* The search row at the top of the popup. */
.combobox-content.is-search {
  min-width: max(var(--anchor-width, 0px), var(--space-64));
}

.combobox-search {
  display:       flex;
  flex:          none;
  align-items:   center;
  gap:           var(--item-gap);
  box-sizing:    border-box;
  min-height:    var(--control-height);
  /* --overlay-padding may be a unitless 0, which calc() rejects. */
  padding-inline: var(--overlay-padding);
  border-bottom: var(--overlay-border-width) solid var(--overlay-border);
}

.combobox-search > .icon {
  flex:   none;
  margin-inline-start: var(--item-padding-x);
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
  color:  var(--ink-dim);
}

.combobox-search .combobox-input {
  flex:   1 1 auto;
  margin-inline-end: var(--item-padding-x);
  height: var(--control-height);
}

/* Chips */

.combobox-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-0-5);
  box-sizing:     border-box;
  max-width:      100%;
  height:         var(--tag-height);
  padding-inline: var(--tag-padding-x) var(--space-0-5);
  border-radius:  var(--radius-tag);
  background:     var(--secondary);
  color:          var(--secondary-ink);
  font-size:      var(--tag-font-size);
  font-weight:    var(--tag-weight);
  white-space:    nowrap;
  cursor:         default;
  outline:        none;
}

/* The chips sit flush with the edges of the row that scrolls them, which
   clips an outer ring: the ring is drawn inside the chip. */
.combobox-chip:focus-visible,
.combobox-chip:focus {
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

.combobox-chip-label {
  overflow:      hidden;
  text-overflow: ellipsis;
}

.combobox-chip-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           calc(var(--tag-height) - var(--space-1));
  height:          calc(var(--tag-height) - var(--space-1));
  margin:          0;
  padding:         0;
  border:          0;
  border-radius:   var(--radius-tag);
  background:      transparent;
  color:           inherit;
  opacity:         var(--opacity-muted);
  cursor:          pointer;
}

.combobox-chip-remove:hover {
  opacity:    1;
  background: var(--secondary-hover);
}

.combobox-chip-remove .icon {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* The count of values past chipLimit, set like a chip. */
.combobox-chip-more {
  display:        inline-flex;
  align-items:    center;
  flex:           none;
  box-sizing:     border-box;
  height:         var(--tag-height);
  padding-inline: var(--tag-padding-x);
  border-radius:  var(--radius-tag);
  color:          var(--ink-dim);
  font-size:      var(--tag-font-size);
  font-weight:    var(--tag-weight);
  white-space:    nowrap;
}

/* The form value: in the control's box so a validation bubble points at it. */
.combobox-form-input {
  position:       absolute;
  inset-inline-start: 0;
  bottom:         0;
  width:          1px;
  height:         1px;
  margin:         0;
  padding:        0;
  border:         0;
  opacity:        0;
  pointer-events: none;
}

/* Content */

.combobox-content {
  --combobox-indicator-width: var(--icon-size);
  --combobox-max-height: calc(var(--item-height) * 10.5);

  position:         fixed;
  box-sizing:       border-box;
  display:          flex;
  flex-direction:   column;
  min-width:        var(--anchor-width, var(--space-48));
  max-width:        var(--available-width, calc(100vw - 2 * var(--space-2)));
  max-height:       min(var(--combobox-available-height, var(--combobox-max-height)), var(--combobox-max-height));
  margin:           0;
  padding:          0;
  overflow:         hidden;
  color:            var(--overlay-ink);
  background:       var(--overlay-bg);
  border:           var(--overlay-border-width) solid var(--overlay-border);
  border-radius:    var(--radius-overlay);
  box-shadow:       var(--overlay-shadow);
  font-family:      var(--font-ui);
  font-size:        var(--text-ui);
  font-weight:      var(--weight-body);
  letter-spacing:   var(--tracking-ui);
  line-height:      var(--leading-snug);
  outline:          none;
  transform-origin: var(--transform-origin);
}

.combobox-content:not(:popover-open) {
  display: none;
}

.combobox-list {
  flex:                1 1 auto;
  min-height:          0;
  padding:             var(--overlay-padding);
  overflow-x:          hidden;
  overflow-y:          auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--overlay-padding);
}

.combobox-content[data-empty] .combobox-list,
.combobox-content[data-loading] .combobox-list {
  padding-block: 0;
}

/* A virtualized list: a spacer as tall as every row, the rendered window moved down inside it. */
.combobox-virtual {
  position: relative;
}

.combobox-virtual-window {
  position: absolute;
  inset-inline: 0;
  top:      0;
}

/* Items */

.combobox-item {
  position:       relative;
  display:        flex;
  align-items:    center;
  gap:            var(--item-gap);
  box-sizing:     border-box;
  min-height:     var(--item-height);
  padding-block:  0;
  padding-inline: var(--item-padding-x) calc(var(--item-padding-x) * 2 + var(--combobox-indicator-width));
  border-radius:  var(--radius-item);
  color:          inherit;
  cursor:         default;
  user-select:    none;
  outline:        none;
}

.combobox-item[hidden],
.combobox-group[hidden],
.combobox-separator[hidden] {
  display: none;
}

.combobox-item-text {
  display:     inline-flex;
  align-items: center;
  gap:         var(--item-gap);
  flex:        1 1 auto;
  min-width:   0;
}

.combobox-item-text > .icon {
  flex:   none;
  width:  var(--icon-size);
  height: var(--icon-size);
  color:  var(--ink-dim);
}

.combobox-item[data-highlighted] {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.combobox-item[data-disabled] {
  color:  var(--ink-faint);
  cursor: not-allowed;
}

.combobox-item-indicator {
  position:         absolute;
  inset-inline-end: var(--item-padding-x);
  top:              0;
  bottom:           0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            var(--combobox-indicator-width);
  visibility:       hidden;
  pointer-events:   none;
}

.combobox-item-indicator .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.combobox-item[data-selected] > .combobox-item-indicator {
  visibility: visible;
}

/* A grid (ComboboxRow): each row lays its cells in --combobox-columns equal
   columns (default 4), so every row lines up whatever its cells hold. A row
   with no match hides. The selected cell's check sits in its top corner. */
.combobox-row {
  display:               grid;
  grid-template-columns: repeat(var(--combobox-columns, 4), minmax(0, 1fr));
}

.combobox-row[hidden] {
  display: none;
}

.combobox-row > .combobox-item {
  justify-content: center;
  padding-inline:  var(--item-padding-x);
  text-align:      center;
}

.combobox-row > .combobox-item > .combobox-item-text {
  flex:            0 1 auto;
  justify-content: center;
}

.combobox-row > .combobox-item > .combobox-item-indicator {
  bottom: auto;
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
  inset-inline-end: var(--space-1);
  top:    var(--space-1);
}

.combobox-row > .combobox-item > .combobox-item-indicator .icon {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.combobox-label {
  display:        flex;
  align-items:    center;
  box-sizing:     border-box;
  min-height:     var(--item-height);
  padding:        0 var(--item-padding-x);
  color:          var(--ink-dim);
  font-size:      var(--text-caption);
  font-weight:    var(--weight-ui);
  text-transform: var(--case-ui);
}

.combobox-separator {
  height:     var(--overlay-border-width);
  margin:     var(--overlay-padding) calc(var(--overlay-padding) * -1);
  background: var(--overlay-border);
}

.combobox-empty,
.combobox-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--item-gap);
  box-sizing:      border-box;
  min-height:      calc(var(--item-height) * 2);
  padding:         var(--space-2) var(--item-padding-x);
  color:           var(--ink-dim);
  font-size:       var(--text-ui);
  text-align:      center;
}

/* Arrow (arrow) */

/* Base UI Combobox.Arrow: a bordered square turned 45 degrees, half outside
   the popup's anchor-facing edge; float() centers it on the input. */
.combobox-content:has(> .combobox-arrow) {
  overflow: visible;
}

.combobox-arrow {
  --combobox-arrow-size: var(--space-2-5);

  width:          var(--combobox-arrow-size);
  height:         var(--combobox-arrow-size);
  background:     var(--overlay-bg);
  border:         var(--overlay-border-width) solid var(--overlay-border);
  pointer-events: none;
}

.combobox-arrow[data-side="bottom"] {
  top:                 calc(var(--combobox-arrow-size) / -2 - var(--overlay-border-width));
  border-right-color:  transparent;
  border-bottom-color: transparent;
  transform:           rotate(45deg);
}

.combobox-arrow[data-side="top"] {
  bottom:            calc(var(--combobox-arrow-size) / -2 - var(--overlay-border-width));
  border-left-color: transparent;
  border-top-color:  transparent;
  transform:         rotate(45deg);
}

.combobox-arrow[data-side="right"] {
  left:               calc(var(--combobox-arrow-size) / -2 - var(--overlay-border-width));
  border-top-color:   transparent;
  border-right-color: transparent;
  transform:          rotate(45deg);
}

.combobox-arrow[data-side="left"] {
  right:               calc(var(--combobox-arrow-size) / -2 - var(--overlay-border-width));
  border-bottom-color: transparent;
  border-left-color:   transparent;
  transform:           rotate(45deg);
}

/* Backdrop (backdrop) */

/* Base UI Backdrop: a top layer overlay under the popup, shown first so the
   popup stacks above it. A press on it is an outside press. */
.combobox-backdrop {
  position:   fixed;
  inset:      0;
  width:      auto;
  height:     auto;
  max-width:  none;
  max-height: none;
  margin:     0;
  padding:    0;
  border:     0;
  background: var(--backdrop);
  backdrop-filter: blur(var(--backdrop-blur));
  /* A modal popup turns pointer events off on the page; the backdrop takes
     the press that closes it. */
  pointer-events: auto;
}

.combobox-backdrop:not(:popover-open) {
  display: none;
}

.combobox-backdrop[data-state="open"] {
  animation: combobox-backdrop-in var(--duration-enter) var(--ease-enter);
}

.combobox-backdrop[data-state="closed"] {
  animation: combobox-backdrop-out var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes combobox-backdrop-in {
  from { opacity: 0; }
}

@keyframes combobox-backdrop-out {
  to { opacity: 0; }
}

/* Motion */

.combobox-content[data-state="open"] {
  animation: combobox-in var(--duration-enter) var(--ease-enter);
}

.combobox-content[data-state="closed"] {
  animation: combobox-out var(--duration-exit) var(--ease-exit) forwards;
}

.combobox-content[data-side="bottom"] { --combobox-slide-y: calc(var(--enter-distance) * -1); }
.combobox-content[data-side="top"]    { --combobox-slide-y: var(--enter-distance); }

@keyframes combobox-in {
  from {
    opacity:   0;
    transform: translateY(var(--combobox-slide-y, 0)) scale(var(--enter-scale));
  }
}

@keyframes combobox-out {
  to {
    opacity:   0;
    transform: scale(var(--enter-scale));
  }
}

/* Inline (inline) */

/* Base UI Root inline: the list sits in the page under the input, always
   shown. It keeps one height, so filtering never moves what follows. */
.combobox-root.is-inline {
  flex-direction: column;
  gap:            var(--space-1);
}

.combobox-content.is-inline {
  --combobox-inline-height: calc(var(--item-height) * 7);

  position:      static;
  display:       flex;
  width:         100%;
  min-width:     0;
  max-width:     100%;
  height:        var(--combobox-inline-height);
  max-height:    none;
  background:    var(--surface-bg);
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  box-shadow:    none;
  animation:     none;
}

}

/* FORCED COLORS -------------------------------------------------------------
   High contrast drops box-shadow and paints every background Canvas, so the
   focus rings and the highlight fill would vanish. Focus becomes an outline
   (no layout effect) and the keyboard highlight a Highlight frame drawn
   inside the row, where the list's overflow cannot clip it. */

@layer components {

@media (forced-colors: active) {
  .combobox-control:has(.combobox-input:focus-visible),
  .combobox-control.is-trigger:focus-visible,
  .combobox-clear:focus-visible,
  .combobox-trigger:focus-visible {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: var(--focus-ring-offset);
  }

  /* Inside the chip, so the values row's sideways scroll cannot clip it. */
  .combobox-chip:focus-visible,
  .combobox-chip:focus {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .combobox-item[data-highlighted] {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .combobox-item[data-disabled] {
    color: GrayText;
  }
}

}