/*
NativeSelect

A native <select> in the control chrome with a chevron drawn by an icon
over its end, so the caret follows the ink color in every mode. The
wrapper is as wide as the select's longest option unless is-block.

  .native-select               wrapper (inline-grid; select and icon stack)
  .native-select.is-block      full width
  .native-select-control       the <select>
  .native-select-icon          the chevron, pointer-events: none
*/

@layer components {

.native-select {
  position:       relative;
  display:        inline-grid;
  align-items:    center;
  min-width:      0;
  vertical-align: middle;
}

.native-select.is-block {
  display: grid;
  width:   100%;
}

.native-select > * {
  grid-area: 1 / 1;
}

.native-select-control {
  appearance:         none;
  -webkit-appearance: none;
  width:              100%;
  min-width:          0;
  height:             var(--control-height);
  margin:             0;
  padding-block:      0;
  padding-inline:     var(--control-padding-x) calc(var(--control-padding-x) + var(--icon-size) + var(--control-gap));
  border:             var(--control-border-width) solid var(--control-border);
  border-radius:      var(--radius-control);
  background:         var(--control-bg);
  background-image:   none;
  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:             pointer;
  transition:         border-color var(--duration-fast) var(--ease-out),
                      box-shadow var(--duration-fast) var(--ease-out);
}

.native-select-control option,
.native-select-control optgroup {
  background: var(--bg-elevated);
  color:      var(--ink);
}

/* Hover sits at the family's own specificity, so a later focus, checked or
   invalid rule keeps its border while the pointer is over the control. */
.native-select-control:where(:hover:not(:disabled)) {
  border-color: var(--rule-strong);
}

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

.native-select-control:has(option[value=""]:checked) {
  color: var(--ink-dim);
}

.native-select-icon {
  justify-self:   end;
  margin-inline-end: var(--control-padding-x);
  width:          var(--icon-size);
  height:         var(--icon-size);
  color:          var(--ink-soft);
  pointer-events: none;
}

.native-select-icon svg {
  display: block;
  width:   100%;
  height:  100%;
}

/* Sizes */

.native-select.is-sm > .native-select-control {
  height:        var(--control-height-sm);
  padding-inline: var(--control-padding-x-sm) calc(var(--control-padding-x-sm) + var(--icon-size-sm) + var(--control-gap));
  font-size:     var(--text-ui-sm);
}

.native-select.is-sm > .native-select-icon {
  width:             var(--icon-size-sm);
  height:            var(--icon-size-sm);
  margin-inline-end: var(--control-padding-x-sm);
}

.native-select.is-lg > .native-select-control {
  height:        var(--control-height-lg);
  padding-inline: var(--control-padding-x-lg) calc(var(--control-padding-x-lg) + var(--icon-size-lg) + var(--control-gap));
  font-size:     var(--text-ui-lg);
}

.native-select.is-lg > .native-select-icon {
  width:             var(--icon-size-lg);
  height:            var(--icon-size-lg);
  margin-inline-end: var(--control-padding-x-lg);
}

/* States */

.native-select:has(> .native-select-control:disabled) {
  opacity: var(--opacity-disabled);
}

:is(.label:has(:disabled), .label[data-disabled], .field-label:has(:disabled), .field:is([data-disabled], fieldset:disabled .field) > :is(.field-label, .field-content)) .native-select {
  opacity: 1;
}

.native-select-control:disabled {
  /* The wrapper dims, once; not the select again (base select rule). */
  opacity:    1;
  cursor:     not-allowed;
  background: var(--bg-soft);
}

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

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

}