/*
  Controls — Website Refresh 2026 1e (Figma), "Controls" frame
  (currently just Video Toggle — Figma names the frame plural,
  suggesting more control types are expected later).
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-39221

  Requires tokens.css and icons.css to be loaded first. Pair with
  js/video-toggle.js for the play/pause behaviour.

  A single button whose icon reflects the action a click will take
  (shows "play" while paused, "pause" while playing), same pattern as
  the Accordion's icon swap: aria-pressed on the button is the single
  source of truth, CSS reacts to it directly.

  Icon colour is dark-90 in both Default and Hover states (confirmed
  from the exported SVGs, not assumed) — only the background changes,
  from 80%-opacity white to solid white.
*/

.rs-video-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--color-transparency-light-80);
  color: var(--color-transparency-dark-90);
  transition: background-color 0.15s ease;
}
.rs-video-toggle:hover {
  background-color: var(--color-neutral-white-50);
}

/* Scoped under .rs-video-toggle (not just the bare
   .rs-video-toggle__icon class) so this reliably beats .rs-icon's own
   20px width/height (icons.css) — both selectors are equally
   specific (one class each), so it otherwise comes down to file load
   order, and icons.css loads after this file on the live page,
   rendering the icon at 20px instead of the intended 48px (the "2x
   too small" actually reported). */
.rs-video-toggle .rs-video-toggle__icon {
  width: 48px;
  height: 48px;
  /* The Lucide sprite's icons use a 24-unit viewBox, and CSS
     stroke-width is interpreted in that coordinate space, not
     physical pixels — it scales up together with width/height. At
     this 48px render size, 1px here renders as ~2px on screen
     (1 * 48/24), matching Figma's actual stroke weight. Setting this
     to a literal 2px would render at ~4px, twice as thick. */
  stroke-width: 1px;
}

.rs-video-toggle__icon--pause {
  display: none;
}
.rs-video-toggle[aria-pressed="true"] .rs-video-toggle__icon--play {
  display: none;
}
.rs-video-toggle[aria-pressed="true"] .rs-video-toggle__icon--pause {
  display: block;
}