/*
 * THE SEARCHABLE PICKER — a field that reads its choice and never turns into an input, and a popup whose
 * top is the search with the listbox under it. The field owns the ring (`:focus-visible`, §2.3); open, it
 * wears the same ring while focus is in the popup's search.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-combobox__input-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-combobox__input {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    height: var(--lotics-control-height);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    color: var(--lotics-ink-default);
    text-align: start;
    /* A trigger sets a value, so the kit's cursor rule keeps the arrow. */
    cursor: default;
    outline-style: none;
    transition-property: border-color, outline-color;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
    /* Every word the box seats — a chosen row's title, the prompt — at the input rung, as a typed value: 16 on a
       phone. */
    --lotics-text-sm: var(--lotics-input-text);
    --lotics-leading-sm: var(--lotics-input-leading);
    --lotics-leading-tight-sm: var(--lotics-input-leading-tight);
    --lotics-tracking-sm: var(--lotics-input-tracking);
  }

  .lotics-combobox__input:not([data-disabled]):hover {
    border-color: var(--lotics-border-hover);
  }

  .lotics-combobox__input:focus-visible,
  .lotics-combobox__input[data-popup-open] {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: 0;
  }

  .lotics-combobox__input[data-disabled] {
    opacity: var(--lotics-disabled-opacity);
  }

  /* A chosen row reads whole in the field, which grows to seat it — shut, open and once picked alike. The row
     is its option, at its size: across, an option's padding less the field's border; down, a control's own
     inset around its content, so a row of one line is a control's height and its title stands where a
     control's words do — on its label's line. */
  .lotics-combobox__input[data-chosen] {
    height: auto;
    min-height: var(--lotics-control-height);
  }

  .lotics-combobox__chosen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    --lotics-combobox-chosen-block: calc((var(--lotics-control-height) - var(--lotics-control-content-height)) / 2 - 1px);
    --lotics-combobox-chosen-inset: calc(var(--lotics-space-8) - 1px);
    padding-block: var(--lotics-combobox-chosen-block);
    padding-inline: var(--lotics-combobox-chosen-inset);
  }

  /* A set's rows stand one under another in the one frame, a peer's gap apart, each with its removal. */
  .lotics-combobox__chosen[data-set] {
    gap: var(--lotics-space-8);
  }

  .lotics-combobox__face {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-combobox__placeholder {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding-inline: var(--lotics-space-8);
  }

  /* The chevron has no inset of its own, so the words keep 6px from it. */
  .lotics-combobox__placeholder:has(+ .lotics-combobox__chevron) {
    padding-inline-end: var(--lotics-space-6);
  }

  .lotics-combobox__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 20px;
    height: 20px;
    margin-inline-start: var(--lotics-space-8);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  /* The glyph carries the gutter. */
  .lotics-combobox__icon + .lotics-combobox__placeholder,
  .lotics-combobox__icon + .lotics-combobox__chosen {
    padding-inline-start: var(--lotics-space-6);
  }

  .lotics-combobox__clear {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
    margin-inline-end: var(--lotics-space-6);
  }

  .lotics-combobox__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    margin-inline-end: var(--lotics-space-10);
    --lotics-icon-color: var(--lotics-ink-muted);
  }

  .lotics-combobox__positioner {
    z-index: var(--lotics-z-overlay);
  }

  .lotics-combobox__popup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    /* The field's own width: a wide option folds its figure under its name rather than push the list past
       the form it opens from. */
    min-width: max(var(--anchor-width), var(--lotics-control-min-width));
    max-width: min(var(--available-width), max(var(--anchor-width), var(--lotics-control-min-width)));
    max-height: var(--available-height);
    padding: var(--lotics-space-12);
    border-radius: var(--lotics-radius-card);
    background-color: var(--popover);
    box-shadow: var(--lotics-shadow-raised);
    transition-property: opacity;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-combobox__popup[data-starting-style],
  .lotics-combobox__popup[data-ending-style] {
    opacity: 0;
  }

  /* The search, which takes the focus as the popup opens: a field of its own, as `OptionList`'s is. */
  .lotics-combobox__search {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    height: var(--lotics-control-height);
    margin-block-end: var(--lotics-space-4);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    border-radius: var(--lotics-radius-control);
    background-color: var(--popover);
    transition-property: border-color, outline-color;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-combobox__search:hover {
    border-color: var(--lotics-border-hover);
  }

  .lotics-combobox__search:focus-within {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: 0;
  }

  .lotics-combobox__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 20px;
    height: 20px;
    margin-inline-start: var(--lotics-space-8);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  .lotics-combobox__search-input {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    margin: 0;
    padding-block: var(--lotics-space-8);
    padding-inline-start: var(--lotics-space-6);
    padding-inline-end: var(--lotics-space-8);
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--lotics-ink-default);
    font-family: var(--font-sans);
    font-size: var(--lotics-input-text);
    line-height: var(--lotics-input-leading);
    letter-spacing: var(--lotics-input-tracking);
    font-weight: var(--lotics-weight-regular);
    appearance: none;
    outline-style: none;
    cursor: text;
  }

  .lotics-combobox__search-input::placeholder {
    color: var(--lotics-ink-placeholder);
    /* Firefox dims placeholders; the ink role already does. */
    opacity: 1;
  }

  .lotics-combobox__recents {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline: var(--lotics-space-8);
    padding-block: var(--lotics-space-4) var(--lotics-space-2);
  }

  .lotics-combobox__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: var(--lotics-space-2);
  }

  .lotics-combobox__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    min-height: var(--lotics-control-height);
    padding-block: var(--lotics-space-8);
    padding-inline: var(--lotics-space-8);
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    color: var(--lotics-ink-default);
    cursor: default;
    user-select: none;
    outline-style: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-combobox__item[data-highlighted] {
    background-color: var(--lotics-wash-hover);
  }

  .lotics-combobox__item[data-selected] {
    background-color: var(--lotics-wash-selected);
  }

  .lotics-combobox__item[data-disabled] {
    opacity: 0.6;
    color: var(--lotics-ink-inactive);
  }

  .lotics-combobox__item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  /* A link value spans the item, so its figure takes the right edge. */
  .lotics-combobox__item-content[data-row] {
    align-items: stretch;
  }

  .lotics-combobox__status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-block: var(--lotics-space-16);
    padding-inline: var(--lotics-space-8);
  }

  /* Base UI keeps it mounted to announce; empty takes no room. */
  .lotics-combobox__status:empty {
    display: none;
  }

  /* Outside the listbox, below the scroll; the rule over it is a `Divider`, drawn only under rows. */
  .lotics-combobox__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    padding-inline: var(--lotics-space-8);
    padding-block: var(--lotics-space-6);
  }
}