/* The string slider: a volume control on a white page. The string is coral up to the knob and pale after it; the
   value hangs over the knob in a dark bubble. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141416;           /* text, the bubble */
  --muted: #8b8b93;
  --string: #ff5233;        /* the string up to the knob */
  --rest: #ececf0;          /* the string after the knob */
  --knob: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.volume {
  width: min(460px, 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the name, with the speaker */
.volume__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 13px;
}

.volume__icon {
  width: 26px;
  height: 26px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.volume__speaker {
  fill: var(--ink);
}

.volume__mute {
  stroke: var(--string);
  stroke-width: 2.2;
  opacity: 0;
}

.volume__label {
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- the string and the knob */
/* the knob's middle runs from one end of the track to the other: the margins keep it inside the box. The string
   is low in the track, to leave room above it for the bubble even when the string is pulled up */
.volume__track {
  position: relative;
  height: 130px;
  margin: 0 13px;
  touch-action: pan-y;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.volume__string {
  position: absolute;
  inset: 0 -13px;
  width: calc(100% + 26px);
  height: 100%;
  overflow: visible;
}

.volume__string path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.volume__empty {
  stroke: var(--rest);
}

.volume__string .volume__sweep {
  stroke: none;
}

.volume__string .volume__sweep--full {
  fill: var(--string);
}

.volume__string .volume__sweep--empty {
  fill: #d5d5db;
}

.volume__full {
  stroke: var(--string);
}

/* the knob sits on the string; the script moves it along and up and down */
.volume__thumb {
  position: absolute;
  left: -13px;
  top: 69px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: grab;
}

.volume__knob {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 0 0 1px rgba(20, 20, 22, 0.08), 0 1px 2px rgba(20, 20, 22, 0.22), 0 6px 14px rgba(20, 20, 22, 0.12);
}

.volume__track:focus-visible .volume__knob {
  box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink), 0 6px 14px rgba(20, 20, 22, 0.12);
}

.is-held .volume__thumb {
  cursor: grabbing;
}

/* the bubble hangs over the knob on a stem, and leans from the stem's foot */
.volume__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 34px;
  margin-bottom: 12px;
  translate: -50% 0;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  transform-origin: 50% calc(100% + 14px);
  pointer-events: none;
}

.volume__bubble::after {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 100%;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--ink);
}

.volume__number {
  font-size: 16px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}