/* Scroll template (templates/scroll.js). Standard values are taken from .tabs / .palette__scroll:
   hidden scrollbar, drag handled in app.js, contained overscroll, 8 px gap, 6 px edge padding.

   A horizontal plate (.scroll-plate, e.g. .tabs) is two nested boxes, not one: the outer one is just
   the grey Color 10 plate (background + its own radius, sized by --scroll-w/h), and the actual
   scrolling element (.scroll) sits --scroll-edge inside it on every side, with its own smaller radius.
   That inner radius is sized to exactly match the active group's pill (same height, so half of it is
   the same radius as the pill's own rounded end) — so when a tab or the pill itself scrolls to the
   end, it's clipped by a corner that already has its exact shape, instead of being cut by the plate's
   own (bigger, differently-centred) corner. A vertical plate (the main menu list) has no such
   pill-shaped problem and stays a single box, like a plain (plate: false) scroll with no plate at all. */
.scroll-plate {
  --scroll-w: 100%;
  --scroll-h: 36px;
  --scroll-edge: 6px;
  --scroll-radius: calc(var(--scroll-h) / 2);
  width: var(--scroll-w);
  height: var(--scroll-h);
  border-radius: var(--scroll-radius);
  background: var(--bg-secondary);
  padding: var(--scroll-edge);
  box-sizing: border-box;
}

.scroll {
  --scroll-w: 100%;
  --scroll-h: 36px;
  --scroll-gap: 8px;
  --scroll-radius: calc(var(--scroll-h) / 2);
  width: var(--scroll-w);
  height: var(--scroll-h);
  border-radius: var(--scroll-radius);
  scrollbar-width: none;
  overscroll-behavior: contain;
}

/* the browser scrolls it by itself, along its own axis */
.scroll[data-axis="x"] {
  touch-action: pan-x;
}

.scroll[data-axis="y"] {
  touch-action: pan-y;
}

.scroll--plate {
  background: var(--bg-secondary);
}

/* overrides the plain .scroll sizing above: inside a .scroll-plate it fills the plate's padding box
   (the --scroll-edge inset) instead of taking its own --scroll-w/h. 999px rather than a calc'd radius
   so it's always exactly a pill for whatever height results — browsers clamp an oversized radius down
   to half the box's own height, the same trick .tabs__pill (tabGroups.css) uses for the same reason. */
.scroll-plate > .scroll {
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.scroll[data-axis="x"] {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.scroll[data-axis="y"] {
  overflow-x: hidden;
  overflow-y: auto;
  --scroll-radius: 16px; /* a vertical plate is not a pill */
}

.scroll__inner {
  display: flex;
  gap: var(--scroll-gap);
  box-sizing: border-box;
}

.scroll[data-axis="x"] > .scroll__inner {
  align-items: center;
  width: max-content;
  min-width: 100%;
  height: 100%;
}

.scroll[data-axis="y"] > .scroll__inner {
  flex-direction: column;
  align-items: stretch;
  height: max-content;
  min-height: 100%;
  padding: 6px 0;
}