/* Liquid-glass capsule holding the top-right controls as segments. */
.glass-capsule {
  display: flex;
  align-items: center;
  padding: 4px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0.04) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 1px rgb(0 0 0 / 0.15),
    0 8px 24px rgb(0 0 0 / 0.28);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink-muted);
}

.glass-capsule > * {
  position: relative;
}

/* Hairline between neighbouring segments, faded at both ends. */
.glass-capsule > :not([hidden]) ~ :not([hidden])::before {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: -0.5px;
  width: 1px;
  background: linear-gradient(transparent, rgb(255 255 255 / 0.22), transparent);
  pointer-events: none;
}

.glass-segment {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.glass-capsule[hidden] {
  display: none !important;
}

.glass-segment[hidden] {
  display: none;
}

/* Only where something hovers: on touch screens :hover sticks after a tap, so the button would stay lit. */
@media (hover: hover) {
  .glass-segment:hover {
    color: var(--ink);
    background: rgb(255 255 255 / 0.08);
  }
}

.glass-segment:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.control-icon {
  width: 20px;
  height: 20px;
}

.control-icon-fill {
  fill: currentColor;
}

.control-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}