@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

@layer cinder.components {
  /* ========================================
   * FACETED FILTER BAR
   * ======================================== */

  .cinder-filter-bar {
    container-type: inline-size;
    container-name: cinder-filter-bar;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  /* Controls row: search + facet selects.
   * Below the container-query breakpoint, controls stack in a single
   * column. At or above it, controls lay out on a shared grid so facets
   * on a wrapped row line up under the facets above them instead of each
   * packing to its own content width the way `flex-wrap` does. The search
   * track is capped at `20rem` instead of using `1fr` so it no longer
   * absorbs all remaining row space. */
  .cinder-filter-bar__controls {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  @container cinder-filter-bar (min-width: 40rem) {
    .cinder-filter-bar__controls {
      /* Uniform facet tracks only. The search does NOT get a track of its own:
         when it did, grid auto-placement wrapped the next overflowing facet into
         column 1 — the wide 14-20rem search track — so that one facet rendered far
         wider than its siblings. That is the ragged alignment this issue exists to
         remove, just relocated to the wrap boundary. */
      grid-template-columns: repeat(auto-fit, minmax(9rem, max-content));
    }

    /* The search spans the full row above the facets, so every facet sits in an
       identically sized track no matter how the rows wrap. It still does not absorb
       the row: max-inline-size caps it well short of the full span. */
    .cinder-filter-bar__search {
      grid-column: 1 / -1;
      max-inline-size: 20rem;
    }
  }

  .cinder-filter-bar__search {
    min-inline-size: min(14rem, 100%);
  }

  /* Facet wrapper: positions the select + chevron overlay */
  .cinder-filter-bar__facet {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
  }

  /* The chevron is absolutely positioned against this wrapper, so the wrapper and the
     select have to end at the same edge. In the stacked single-column layout the grid
     item stretches to the full row while a native select stays content-sized, which
     left the chevron floating in the gap to the select's right. Stretching the select
     to fill its wrapper keeps the two edges together at every width. */
  .cinder-filter-bar__facet .cinder-filter-bar__select {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .cinder-filter-bar__facet-label {
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-medium);
    line-height: var(--cinder-leading-tight);
    white-space: nowrap;
  }

  /* Native select styled to match cinder input frame */
  .cinder-filter-bar__select {
    appearance: none;
    padding-block: var(--cinder-space-2);
    padding-inline-start: var(--cinder-space-3);
    padding-inline-end: var(--cinder-space-8);
    background: var(--cinder-surface-raised);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    color: var(--cinder-text-default);
    font: inherit;
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-normal);
    min-block-size: var(--cinder-control-height-sm, 2rem);
    cursor: pointer;
    transition:
      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  @media (hover: hover) {
    .cinder-filter-bar__select:hover:not(:disabled) {
      border-color: var(--cinder-border-strong);
    }
  }

  .cinder-filter-bar__select:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow:
      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
  }

  @media (forced-colors: active) {
    .cinder-filter-bar__select:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
    }
  }

  .cinder-filter-bar__select:disabled {
    background: var(--cinder-surface-inset);
    border-color: var(--cinder-border-muted);
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }

  /* Decorative chevron overlaid on the select */
  .cinder-filter-bar__select-chevron {
    pointer-events: none;
    position: absolute;
    inset-inline-end: var(--cinder-space-3);
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 0.75rem;
    block-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cinder-text-muted);
  }

  .cinder-filter-bar__select-chevron::after {
    content: '';
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: 1.5px solid currentcolor;
    border-block-end: 1.5px solid currentcolor;
    transform: rotate(45deg) translateY(-25%);
  }

  /* Applied-filters chip row */
  .cinder-filter-bar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  /* Disabled state on the root affects the controls row visually */
  .cinder-filter-bar[data-disabled] .cinder-filter-bar__select {
    background: var(--cinder-surface-inset);
    border-color: var(--cinder-border-muted);
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }
}