/* .slider-button — v23's raised-glass pill buttons: the industries ← → and the
   touch-only pause button (spec decisions 15, 16, 32, 46, 50, 66 items 5-6).
   Fills, bevel, shadows and glows are the shared tokens; timings are the
   motion tokens (v23 180ms -> 200ms). `.is-hover` and `.is-pressed` let the
   styleguide show those looks without a mouse.
   box-shadow only animates when every state has the same number of shadows
   with inset/outer in the same places. All three states use 7 shadows in the
   pattern outer, 5 inset, outer; `0 0 0 0 transparent` fills the gaps. The
   glow sits second so it paints over the glass bevel (first paints on top). */
.slider-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-3xl); /* v23 83px */
  block-size: var(--space-xl);   /* v23 46px */
  padding: 0 0 5px;              /* optical: lifts Archivo's arrow to the centre (v23) */
  border: var(--border-3) solid var(--glass-fill); /* v23 2.5px at .34; --border-2 or -3, Mitchell confirms at the STOP */
  border-radius: 999px;
  background: radial-gradient(ellipse at 34% 12%, var(--gradient-glass-shine));
  color: var(--text-muted);      /* v23 .54 */
  font-family: var(--font-secondary); /* Archivo: Red Hat Text has no ← → (decision 67 item 2) */
  font-size: var(--step-2);      /* v23 1.95rem */
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  box-shadow:
    var(--shadow-raised),
    inset 0 0 0 0 transparent,   /* placeholder for --glow-inner */
    var(--shadow-glass);
  text-shadow: var(--shadow-crisp);
  transition:
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.slider-button[hidden] {
  display: none;
}

/* Top bevel highlight */
.slider-button::before {
  content: "";
  position: absolute;
  inset: 5px var(--space-2xs) auto; /* 5px: optical, keeps the bevel inside the border (v23) */
  block-size: 45%;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--gradient-sheen));
  filter: blur(0.2px);
  pointer-events: none;
}

/* Outer ring, sitting on the border */
.slider-button::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--border-3)); /* cancels the border width */
  border-radius: inherit;
  border: var(--border-1) solid var(--hairline-color);
  pointer-events: none;
}

.slider-button:is(:hover, :focus-visible, .is-hover) {
  color: var(--text-soft);       /* v23 .82 */
  background:
    radial-gradient(ellipse at 50% 62%, var(--gradient-glow)),
    radial-gradient(ellipse at 34% 12%, var(--gradient-glass-shine));
  box-shadow:
    var(--shadow-raised),
    var(--glow-inner),
    var(--shadow-glass);
  outline: none;                 /* v23: the mint glow is the focus look */
}

.slider-button:is(:active, .is-pressed) {
  transform: scale(0.982);
  color: var(--text-muted);      /* v23 .62 */
  background: radial-gradient(ellipse at 50% 70%, var(--gradient-glow));
  box-shadow:
    var(--shadow-raised),
    var(--glow-inner),
    var(--shadow-glass-pressed),  /* 3 inset */
    inset 0 0 0 0 transparent,    /* placeholders: match --shadow-glass's 4 inset + 1 outer */
    0 0 0 0 transparent;
}