/*
Select

<div class="select-root" data-select-root>               inline-flex; the trigger's box
  <button class="select-trigger" role="combobox" data-state data-placeholder>
    <span class="select-value-box">                       one grid cell
      <span class="select-sizer" aria-hidden>            every label, hidden: the width
      <span class="select-value">                         the label or the placeholder, overlaid
    <span class="select-icon">                            the chevron
  <input class="select-input" data-select-input>          form value, visually hidden
  <div class="select-content" popover="manual" data-state data-side data-position>
    <div class="select-scroll" data-select-scroll="up">
    <div class="select-list" role="listbox">              the scroll container
      <div class="select-label">                          SelectLabel, a group's label
      <div class="select-item" role="option" data-highlighted data-selected data-disabled>
        <span class="select-item-text">
        <span class="select-item-indicator">              check, shown while selected
      <div class="select-group" role="group">
      <div class="select-separator">
    <div class="select-scroll" data-select-scroll="down">

The trigger is as wide as its longest label, so choosing never moves
anything. Highlight and selection change colors and the indicator's
visibility; the indicator column is always reserved.
*/

@layer components {

.select-root {
  position:       relative;
  display:        inline-flex;
  max-width:      100%;
  vertical-align: middle;
}

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

/* Trigger */

.select-trigger {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  gap:             var(--control-gap);
  box-sizing:      border-box;
  max-width:       100%;
  height:          var(--control-height);
  margin:          0;
  padding:         0 var(--control-padding-x);
  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);
  text-align:      start;
  text-transform:  none;
  vertical-align:  middle;
  cursor:          pointer;
  user-select:     none;
  transition:      border-color var(--duration-fast) var(--ease-out),
                   box-shadow var(--duration-fast) var(--ease-out);
}

.select-root.is-block > .select-trigger {
  width: 100%;
}

.select-trigger.is-sm {
  height:    var(--control-height-sm);
  padding:   0 var(--control-padding-x-sm);
  font-size: var(--text-ui-sm);
}

.select-trigger.is-lg {
  height:    var(--control-height-lg);
  padding:   0 var(--control-padding-x-lg);
  font-size: var(--text-ui-lg);
}

.select-trigger:hover:not(:disabled):not([data-readonly]) {
  border-color: var(--rule-strong);
}

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

.select-trigger[aria-invalid="true"] {
  border-color: var(--danger);
}

.select-trigger[aria-invalid="true"]:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

.select-trigger:disabled {
  cursor:     not-allowed;
  opacity:    var(--opacity-disabled);
  background: var(--bg-soft);
}

.select-trigger[data-readonly] {
  cursor:     default;
  background: var(--bg-soft);
  color:      var(--ink-soft);
}

.select-value-box {
  position:  relative;
  display:   grid;
  flex:      1 1 auto;
  min-width: 0;
}

.select-sizer {
  display: contents;
}

.select-sizer > * {
  grid-area:   1 / 1;
  overflow:    hidden;
  white-space: nowrap;
  visibility:  hidden;
}

.select-value {
  position:      absolute;
  inset:         0;
  display:       flex;
  align-items:   center;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

.select-value > span {
  overflow:      hidden;
  text-overflow: ellipsis;
}

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

.select-icon {
  display:     inline-flex;
  flex:        none;
  color:       var(--ink-dim);
}

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

/* The form value: in the trigger's box so the browser's validation bubble
   points at it, invisible and out of reach. */
.select-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 */

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

  position:         fixed;
  box-sizing:       border-box;
  display:          flex;
  flex-direction:   column;
  min-width:        max(var(--space-32), var(--anchor-width, 0px));
  max-width:        var(--available-width, calc(100vw - 2 * var(--space-2)));
  max-height:       min(var(--available-height, var(--select-max-height)), var(--select-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);
}

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

.select-content[data-position="item-aligned"] {
  max-height: var(--available-height, var(--select-max-height));
}

.select-content[data-position="popper"] {
  max-height: min(var(--select-available-height, var(--select-max-height)), var(--select-max-height));
}

.select-content:has(> .select-arrow) {
  overflow: visible;
}

.select-list {
  flex:            1 1 auto;
  min-height:      0;
  padding:         var(--overlay-padding);
  overflow-x:      hidden;
  overflow-y:      auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline:         none;
}

.select-list::-webkit-scrollbar {
  display: none;
}

/* Items */

.select-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: calc(var(--item-padding-x) + var(--select-align-shift, 0px)) calc(var(--item-padding-x) * 2 + var(--select-indicator-width));
  border-radius: var(--radius-item);
  color:         inherit;
  cursor:        default;
  user-select:   none;
  outline:       none;
  white-space:   nowrap;
}

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

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

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

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

.select-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(--select-indicator-width);
  visibility:         hidden;
  pointer-events:     none;
}

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

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

/* Label, Group, Separator */

.select-label {
  display:        flex;
  align-items:    center;
  box-sizing:     border-box;
  min-height:     var(--item-height);
  padding:        0 var(--item-padding-x);
  padding-inline-start: calc(var(--item-padding-x) + var(--select-align-shift, 0px));
  color:          var(--ink-dim);
  font-size:      var(--text-caption);
  font-weight:    var(--weight-ui);
  text-transform: var(--case-ui);
}

.select-group {
  display: block;
}

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

/* Scroll Buttons */

.select-scroll {
  position:        absolute;
  inset-inline:    0;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          var(--item-height);
  color:           var(--ink-dim);
  background:      var(--overlay-bg);
  cursor:          default;
  visibility:      hidden;
  pointer-events:  none;
}

.select-scroll[data-select-scroll="up"] {
  top:           0;
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
}

.select-scroll[data-select-scroll="down"] {
  bottom:        0;
  border-radius: 0 0 var(--radius-overlay) var(--radius-overlay);
}

.select-scroll[data-visible] {
  visibility:     visible;
  pointer-events: auto;
}

.select-scroll .icon {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Arrow (popper only) */

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

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

.select-content[data-position="item-aligned"] .select-arrow {
  display: none;
}

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

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

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

.select-arrow[data-side="left"] {
  right:               calc(var(--select-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. */
.select-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;
}

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

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

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

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

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

/* Motion */

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

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

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

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

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

}

/* FORCED COLORS -------------------------------------------------------------
   High contrast drops box-shadow and paints every background Canvas, so the
   trigger's ring 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) {
  .select-trigger:focus-visible {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: var(--focus-ring-offset);
  }

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

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

}