/* Toolbar kit
   ---------------------------------------------------------------------------
   One horizontal bar of controls, shared by the files library, collection
   lists and the edit-form utilities. Consumers compose it from these parts
   instead of restyling each other's controls:

     .cms-toolbar              the bar         (+ --framed for the boxed look)
       .cms-toolbar__primary   the search slot, grows and shrinks
       .cms-toolbar__group     a cluster; groups after the first get a divider
       .cms-toolbar__menu      relative wrapper around a trigger + its panel
       .cms-toolbar__control   a trigger button (+ --sort for the direction flip)
       .cms-toolbar__label     droppable text inside a control
       .cms-toolbar__segmented a joined run of buttons
       .cms-toolbar__panel     the popover attached to a control

   The bar stays on a single line at every width. Padding and gaps are fluid,
   so there is no width breakpoint; only the label drops are stepped, because
   text cannot half-disappear. Sizing follows --cms-control-height, so the bar
   honours the density setting (compact already carries the 44px touch floor).

   The bar is a size container, which means it is also a containing block for
   fixed-position descendants. Panels must therefore stay absolutely positioned
   against their trigger -- do not reintroduce a viewport-anchored sheet here.
   --------------------------------------------------------------------------- */

.cms-toolbar {
  container: cms-toolbar / inline-size;
  position: relative;
  z-index: 20;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  /* Percentages resolve against the available inline size; cqi would resolve
     against an ancestor container, not this element. */
  gap: clamp(0.3rem, 1.6%, 0.7rem);
  margin-block: 1rem;
  /* No overflow here: setting one axis makes the other compute to auto, which
     would clip the popovers that hang below the bar. Narrow widths are handled
     by dropping labels and tightening the icon-only controls instead. */
}
.cms-toolbar--framed {
  padding: clamp(0.3rem, 1.4%, var(--cms-toolbar-padding));
  border: 1px solid var(--cms-toolbar-border);
  border-radius: var(--cms-toolbar-radius);
  background: var(--cms-toolbar-bg);
}

.cms-toolbar__primary {
  /* Reaches the full 8rem floor as soon as the bar is wide enough, and gives
     back just enough below that for every control to stay on the line. */
  min-width: clamp(3rem, 20cqi, 8rem);
  max-width: 26rem;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  /* Pushes every following group to the trailing edge. */
  margin-inline-end: auto;
}

.cms-toolbar__group {
  /* Shrink only as far as the contents genuinely allow, so a group can never
     compress a control out of sight. */
  min-width: min-content;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: clamp(0.25rem, 1.2cqi, 0.45rem);
}
.cms-toolbar__group + .cms-toolbar__group {
  padding-inline-start: clamp(0.3rem, 1.4cqi, 0.6rem);
  border-inline-start: 1px solid var(--cms-toolbar-divider);
}

/* Controls ---------------------------------------------------------------- */

.cms-toolbar__menu {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
}

.cms-toolbar__control {
  height: var(--cms-toolbar-control-height);
  min-height: var(--cms-toolbar-control-height);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  /* Both collapse once the label drops, so an icon-only control is a snug
     square rather than a wide box padded around nothing. */
  gap: var(--cms-toolbar-control-gap, 0.42rem);
  padding-inline: var(--cms-toolbar-control-pad, clamp(0.36rem, 0.12rem + 1.1cqi, 0.7rem));
  border: 1px solid var(--color-border);
  border-radius: var(--cms-toolbar-control-radius);
  background: var(--color-field);
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--cms-font-size-xs);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color var(--motion-control),
    box-shadow var(--motion-control),
    background var(--motion-control),
    color var(--motion-fast);
}
.cms-toolbar__control:hover,
.cms-toolbar__control[aria-expanded="true"] {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.cms-toolbar__control[aria-expanded="true"] {
  color: var(--color-accent);
}
.cms-toolbar__control:focus-visible {
  outline: 0;
  border-color: var(--cms-border-accent);
  background: var(--cms-bg-field-focus);
  box-shadow: var(--cms-focus-ring);
}
.cms-toolbar__control > .icon {
  flex: none;
  color: var(--color-faint);
}
.cms-toolbar__control > .icon:last-child {
  width: 0.72rem;
  height: 0.72rem;
  transition: transform var(--motion-control);
}
.cms-toolbar__control[aria-expanded="true"] > .icon:last-child {
  transform: rotate(180deg);
}

.cms-toolbar__label {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The filter label reports the active state, so it never drops to an icon.
   The floor keeps a readable stub once shrinking would otherwise erase it. */
.cms-toolbar__control--filter .cms-toolbar__label {
  min-width: 2rem;
}
.cms-toolbar__control[aria-expanded="true"] .cms-toolbar__label {
  color: var(--color-accent);
}
/* A control holding a non-default selection reads as accented, so an active
   filter stays legible once its label has dropped to an icon. */
.cms-toolbar__control.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.cms-toolbar__control.is-active > .icon,
.cms-toolbar__control.is-active .cms-toolbar__label {
  color: var(--color-accent);
}

/* Sort triggers flip their leading glyph to show the direction. */
.cms-toolbar__control--sort > .icon:first-child {
  transition: transform var(--motion-control);
}
.cms-toolbar__control--sort[data-sort-dir="asc"] > .icon:first-child {
  transform: scaleY(-1);
}

/* Segmented runs ---------------------------------------------------------- */

.cms-toolbar__segmented {
  min-width: 0;
  height: var(--cms-toolbar-control-height);
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid var(--color-border);
  border-radius: var(--cms-toolbar-control-radius);
  background: var(--color-field);
}
/* An icon-bearing run is a short, fixed set (the view toggle): it must never
   scroll, or half of it becomes invisible. Icon-less runs are open-ended
   collection filters, which do scroll rather than force the bar wider. */
.cms-toolbar__segmented:has(.icon) {
  flex: none;
  overflow-x: visible;
}
.cms-toolbar__segmented::-webkit-scrollbar {
  display: none;
}
.cms-toolbar__segmented-item {
  height: 100%;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 0.35rem;
  padding-inline: var(--cms-toolbar-segment-pad, clamp(0.4rem, 0.16rem + 1.2cqi, 0.72rem));
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--cms-font-size-xs);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color var(--motion-fast),
    background var(--motion-control),
    color var(--motion-fast);
}
.cms-toolbar__segmented-item > .icon {
  flex: none;
}
/* The end items round with the run. Done on the items rather than by clipping
   the run, so a focus ring is never cut off. */
.cms-toolbar__segmented-item:first-child {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}
.cms-toolbar__segmented-item:last-child {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}
.cms-toolbar__segmented-item + .cms-toolbar__segmented-item {
  border-left-color: var(--color-border);
}
.cms-toolbar__segmented-item.is-active + .cms-toolbar__segmented-item {
  border-left-color: transparent;
}
.cms-toolbar__segmented-item:hover {
  color: var(--color-text);
}
.cms-toolbar__segmented-item:focus-visible {
  outline: 0;
  box-shadow: var(--cms-focus-ring);
}
.cms-toolbar__segmented-item.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Panels ------------------------------------------------------------------ */

.cms-toolbar__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 25;
  min-width: 12.5rem;
  padding: 0.35rem;
  border-radius: var(--radius-md);
  transform-origin: top right;
}
/* Anchored to the leading edge instead, for a trigger sitting at the start of
   the bar rather than the end. */
.cms-toolbar__panel--start {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* One row inside a toolbar panel. Every toolbar menu -- filters, sort, page
   options -- uses this, so the panels read as one component instead of each
   inventing its own type scale and density. Leading icons are optional; the
   check mark is pushed to the trailing edge rather than relying on
   space-between, which would otherwise split an icon from its label. */
.cms-toolbar__menu-item {
  width: 100%;
  min-height: 2rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--cms-font-size-xs);
  text-align: left;
  text-decoration: none;
  transition:
    background var(--motion-fast),
    color var(--motion-fast);
}
.cms-toolbar__menu-item:hover {
  background: var(--cms-bg-hover);
  color: var(--color-text);
}
.cms-toolbar__menu-item:focus-visible {
  outline: 0;
  box-shadow: var(--cms-focus-ring);
}
.cms-toolbar__menu-item.is-active {
  color: var(--color-accent);
}
.cms-toolbar__menu-item.is-active::after {
  content: "✓";
  margin-left: auto;
}
.cms-toolbar__menu-item > .icon {
  flex: none;
  color: var(--color-faint);
}
/* Keyed to the pointer rather than the viewport: a menu row is tapped with a
   finger on a wide tablet just as much as on a narrow phone. Previously only
   the filter menu grew, and only under a width query. */
@media (pointer: coarse) {
  .cms-toolbar__control,
  .cms-toolbar__segmented-item {
    min-width: var(--cms-touch-target);
  }
  .cms-toolbar__menu-item {
    min-height: var(--cms-touch-target);
    padding-inline: 0.65rem;
  }
}

/* Label drops -------------------------------------------------------------
   Order: icon-bearing segments and the view trigger first, then sort, then
   the filter last of all -- it carries the active state, so it is worth the
   most space and only goes once the bar genuinely cannot hold it. Icon-less
   segments (collection filter pills) keep their text at every width and
   scroll instead, since an icon-less button with no label would be blank.
   Each drop also collapses the control's gap and padding, so a control that
   turns icon-only becomes a snug square rather than a padded box. */

@container cms-toolbar (max-width: 40rem) {
  .cms-toolbar__segmented-item:has(.icon) .cms-toolbar__label,
  .cms-toolbar__control--view .cms-toolbar__label {
    display: none;
  }
  .cms-toolbar__segmented-item:has(.icon) {
    --cms-toolbar-segment-pad: 0.42rem;
  }
  .cms-toolbar__control--view {
    --cms-toolbar-control-gap: 0.16rem;
    --cms-toolbar-control-pad: 0.34rem;
  }
}

@container cms-toolbar (max-width: 30rem) {
  .cms-toolbar__control--sort .cms-toolbar__label {
    display: none;
  }
  .cms-toolbar__control--sort {
    --cms-toolbar-control-gap: 0.16rem;
    --cms-toolbar-control-pad: 0.34rem;
  }
  /* Give the squeezed search slot back to the input rather than to its own
     padding and icon gap. */
  .cms-toolbar__primary .search-control {
    gap: 0.4rem;
    padding-inline: 0.45rem 0.35rem;
  }
}

@container cms-toolbar (max-width: 24rem) {
  .cms-toolbar__control--filter .cms-toolbar__label {
    display: none;
  }
  .cms-toolbar__control--filter {
    --cms-toolbar-control-gap: 0.16rem;
    --cms-toolbar-control-pad: 0.34rem;
  }
}

/* The keyboard hint is a pointer-and-keyboard affordance and the first thing
   worth losing: below this the search slot is narrow enough that the hint
   would eat the placeholder. Keyed to the bar, not the viewport, because the
   sidebar decouples the two. */
@container cms-toolbar (max-width: 52rem) {
  .cms-toolbar .search-control__shortcut {
    display: none;
  }
}