/* Base UI's `Combobox` supplies keyboard, highlight and filtering; this sheet the surface. A row's tick says
   it is picked and one wash where the reader is, so the two stay tellable; a tile, which has no tick, is
   picked by its ring. The list scrolls, not the root, so a search field and select-all band stay outside it. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-option-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* The capture input is absolute; unanchored, focusing it scrolls the page to the nearest positioned
       ancestor. */
    position: relative;
    min-width: 0;
    gap: var(--lotics-space-4);
    max-height: 480px;
  }

  /* On a phone the body fills its sheet. */
  .lotics-option-list[data-compact] {
    flex: 1;
    max-height: none;
  }


  /* The shell paints the field, as in `TextInput`. */
  .lotics-option-list__search {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    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(--popover);
    transition-property: border-color, outline-color;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

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

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

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

  .lotics-option-list__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-option-list__input::placeholder {
    color: var(--lotics-ink-placeholder);
    /* Firefox dims a placeholder by default; the ink role already is the dim. */
    opacity: 1;
  }

  /* 1×1 rather than `display: none`, which no browser focuses. */
  .lotics-option-list__input[data-hidden] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }


  .lotics-option-list__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* A container holding the list whole in its own scroll (a filter band's sheet) lifts the cap: a scroll
       inside a scroll hides options with no edge to say so. */
    max-height: var(--lotics-option-list-reach, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 2 where a field's chips sit at 4: just enough to stop two tinted rows reading as one block. */
    gap: var(--lotics-space-2);
  }

  /* A grid sizes to its tiles, not the trigger; a phone's sheet lets it fill. */
  .lotics-option-list__list[data-grid] {
    width: calc(
      var(--lotics-option-list-columns) * var(--lotics-control-height) +
        (var(--lotics-option-list-columns) - 1) * var(--lotics-space-2)
    );
    max-width: 100%;
    gap: var(--lotics-space-8);
  }

  .lotics-option-list__list[data-grid][data-compact] {
    width: auto;
  }

  .lotics-option-list__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: var(--lotics-space-2);
  }

  /* On the rows' inset, so it starts where a row's label does. */
  .lotics-option-list__group-label {
    padding-block: var(--lotics-space-4);
    padding-inline: var(--lotics-space-8);
  }

  .lotics-option-list__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
  }

  .lotics-option-list__row[data-tiles] {
    display: grid;
    grid-template-columns: repeat(var(--lotics-option-list-columns), minmax(0, 1fr));
    gap: var(--lotics-space-2);
  }

  /* The row's two washes on a control-high square, so the grid reads as the list does. */
  .lotics-option-list__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--lotics-control-height);
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    cursor: default;
    user-select: none;
    outline-style: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* The accent ground carries its own ink, as every shadcn pair does. */
  .lotics-option-list__cell[data-highlighted] {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  /* Ground and ring, so it reads as chosen under the highlight. */
  .lotics-option-list__cell[data-selected] {
    background-color: var(--accent);
    color: var(--accent-foreground);
    box-shadow: inset 0 0 0 1px var(--lotics-border-hover);
  }

  .lotics-option-list__cell[data-disabled] {
    opacity: 0.6;
  }

  .lotics-option-list__caption {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    padding-block-start: var(--lotics-space-8);
    padding-inline: var(--lotics-space-8);
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--border);
  }

  /* An option's word is the value it sets, in the value's weight. */
  .lotics-option-list__item {
    --lotics-status-weight: var(--lotics-input-weight);
    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);
    /* A menu option sets a value rather than acting, so it keeps the arrow. */
    cursor: default;
    user-select: none;
    outline-style: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* The row the pointer or the keys are on. A picked row wears no ground: its tick says it, and a ground
     under every pick of a set turned the list into grey blocks. */
  .lotics-option-list__item[data-highlighted] {
    background-color: var(--lotics-wash-hover);
  }

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

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

  .lotics-option-list__item-description {
    min-width: 0;
  }

  .lotics-option-list__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, it takes no room. */
  .lotics-option-list__status:empty {
    display: none;
  }

  /* The 8px inset matches a row's, so a Button's surface starts on the rows' edge. The list's gap stands
     over it, under the `Divider` drawn only below rows; its own band sits above the popup's inset. */
  .lotics-option-list__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-16);
    padding-block: 0 var(--lotics-space-4);
    padding-inline: var(--lotics-space-8);
  }
}