/*
Command

<div class="command" data-command-root data-empty>              the panel
  <div class="command-input-wrap">                              CommandInput
    <svg search>  <input class="command-input" role="combobox">
  <div class="command-list" role="listbox" style="--command-list-height">   CommandList
    <div class="command-list-sizer" data-command-sizer>        flex column; ranks with order
      <div class="command-loading" role="progressbar">          CommandLoading
      <div class="command-empty" hidden>                        CommandEmpty
      <div class="command-group" data-command-group>            CommandGroup
        <div class="command-group-heading">
        <div class="command-group-items" role="group">          flex column
          <div class="command-item" role="option" data-highlighted data-disabled>
            ... <span class="command-shortcut">                 CommandShortcut
      <div class="command-separator">                           CommandSeparator

Filtering hides rows and ranks the rest with CSS order, so highlight and
search change which rows show, never a row's size. The list is capped at
a height and scrolls.
*/

@layer components {

.command {
  display:        flex;
  flex-direction: column;
  box-sizing:     border-box;
  width:          100%;
  overflow:       hidden;
  color:          var(--overlay-ink);
  background:     var(--overlay-bg);
  border-radius:  var(--radius-overlay);
  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);
}

.command.is-bordered {
  border:     var(--overlay-border-width) solid var(--overlay-border);
  box-shadow: var(--overlay-shadow);
}

/* Input */

.command-input-wrap {
  display:        flex;
  align-items:    center;
  gap:            var(--item-gap);
  box-sizing:     border-box;
  height:         var(--control-height);
  padding-inline: var(--item-padding-x);
  /* Lines the icon up with the items' content, which the list's padding
     insets; a border, so a unitless 0 padding token still works. */
  border-inline:  var(--overlay-padding) solid transparent;
  border-bottom:  var(--overlay-border-width) solid var(--overlay-border);
  color:          var(--ink-dim);
}

.command-input-wrap > .icon {
  flex:   none;
  width:  var(--icon-size);
  height: var(--icon-size);
}

.command-input {
  flex:        1 1 auto;
  min-width:   0;
  height:      100%;
  margin:      0;
  padding:     0;
  border:      0;
  background:  transparent;
  box-shadow:  none;
  color:       var(--overlay-ink);
  font:        inherit;
  letter-spacing: inherit;
  outline:     none;
}

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

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

.command-input:disabled {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

/* List */

.command-list {
  max-height:          var(--command-max-height, calc(var(--item-height) * 9.5));
  overflow-x:          hidden;
  overflow-y:          auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--overlay-padding);
  outline:             none;
}

.command-list-sizer {
  display:        flex;
  flex-direction: column;
  padding:        var(--overlay-padding);
}

.command-group {
  display: block;
}

.command-group-heading {
  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);
  user-select:    none;
}

.command-group-items {
  display:        flex;
  flex-direction: column;
}

.command-item {
  position:      relative;
  display:       flex;
  align-items:   center;
  gap:           var(--item-gap);
  box-sizing:    border-box;
  min-height:    var(--item-height);
  padding:       0 var(--item-padding-x);
  border-radius: var(--radius-item);
  color:         inherit;
  cursor:        default;
  user-select:   none;
  outline:       none;
}

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

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

.command-item[data-highlighted] > .icon {
  color: currentColor;
}

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

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

.command-shortcut {
  margin-inline-start: auto;
  color:               var(--ink-dim);
  font-size:           var(--text-caption);
  letter-spacing:      var(--tracking-widest);
}

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

.command-empty,
.command-loading {
  order:           -1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--item-gap);
  min-height:      calc(var(--item-height) * 2);
  padding:         var(--space-2) var(--item-padding-x);
  color:           var(--ink-dim);
  text-align:      center;
}

/* Dialog */

.dialog.command-dialog {
  padding:  0;
  gap:      0;
  overflow: hidden;
}

.dialog.command-dialog .command {
  border-radius: 0;
  background:    transparent;
}

.dialog.command-dialog .command-input-wrap {
  height: var(--control-height-lg);
}

/* The close button sits at the end of the search row, centered on it; the
   row reserves its width so a long query never runs under it. */
.dialog.command-dialog .dialog-close {
  top:              calc((var(--control-height-lg) - var(--control-height-sm)) / 2);
  inset-inline-end: var(--space-2);
}

.dialog.command-dialog:has(> .dialog-close) .command-input-wrap {
  padding-inline-end: calc(var(--control-height-sm) + var(--space-2));
}

}

@layer components {

.command-dialog-root {
  display: contents;
}

}

/* FORCED COLORS -------------------------------------------------------------
   High contrast paints every background Canvas, so the highlight fill would
   vanish and a keyboard user could not see which item Enter runs. The
   highlight becomes a Highlight frame drawn inside the row, where the
   list's overflow cannot clip it. */

@layer components {

@media (forced-colors: active) {
  .command-item[data-highlighted] {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

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

}