/*
 * THE TOOLBAR ROW above a list: one line at a desk, never wrapping — every chip drawn, the status folding
 * into its one chip first, and the chips taking lines of their own only where even that cannot seat them,
 * which `filter_band_fit.ts` decides off the boxes drawn. On a phone the line is the search, one press
 * opening the sheet of every filter, and the verb; what narrows the rows reads in words under it. The field
 * keeps its readable floor at every width.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-filter-band {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* The chips' own line under the search: the only break the band makes. */
  .lotics-filter-band[data-split] {
    flex-wrap: wrap;
  }

  /* A field's measure, not the line's: grown it pushed the chips off the line. It gives way before a chip
     does, down to what a typed name needs (`SEARCH_FLOOR`). */
  .lotics-filter-band__search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 240px;
    min-width: 160px;
  }

  /* With the chips under it, the field takes what the verb beside it leaves. */
  .lotics-filter-band[data-split] .lotics-filter-band__search {
    flex-grow: 1;
    flex-basis: 0;
  }

  /* The status and each chip keep their own width: squeezed, the status chips would wrap inside the line
     and the fit would read a width the line does not have. One wider than a whole line of its own gives way
     to it, its words cut only then. */
  .lotics-filter-band__status,
  .lotics-filter-band__filter,
  .lotics-filter-band__group,
  .lotics-filter-band__sort,
  .lotics-filter-band__trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
  }

  /* The chips' own lines: the band's whole width, a chip the line cannot seat whole taking the next line —
     never drawn past the band's edge, where nothing says it is there, and never cut while a line is free. */
  .lotics-filter-band__chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex-basis: 100%;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

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

  /* The verb sits at the line's far edge. */
  .lotics-filter-band .lotics-filter-band__action {
    margin-left: auto;
  }

  /* A phone's words of what narrows take the line under its controls. */
  .lotics-filter-band[data-collapsed] {
    flex-wrap: wrap;
  }

  /* A phone's line: the field takes what the one press and the verb leave it. */
  .lotics-filter-band[data-collapsed] .lotics-filter-band__search {
    flex-grow: 1;
    flex-basis: 0;
  }

  /* The phone's one press for every filter, in a filter pill's ink: the accent while anything narrows. */
  .lotics-filter-band .lotics-filter-band__filters {
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    color: var(--lotics-ink-muted);
  }

  .lotics-filter-band .lotics-filter-band__filters[data-active] {
    color: var(--lotics-accent);
  }

  .lotics-filter-band__filters .lotics-filter-band__label {
    color: inherit;
  }

  /* What narrows the rows, in words, on a line of its own under a phone's; it takes none while nothing does. */
  .lotics-filter-band__summary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    flex-basis: 100%;
    min-width: 0;
    column-gap: var(--lotics-space-12);
    row-gap: var(--lotics-space-4);
  }

  .lotics-filter-band__summary:empty {
    display: none;
  }

  /* The sheet: each filter, the grouping and the order under its own name. */
  .lotics-filter-band__sheet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-24);
  }
}