/* Reach the mixer across the 6px gap; show only while .is-open (not :hover / :focus-within). */
.volume-control__panel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 44px;
  height: 16px;
  transform: translateX(-50%);
}

.volume-control:hover .volume-control__panel,
.volume-control:focus-within .volume-control__panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
}

.volume-control.is-open .volume-control__panel,
.volume-control.is-open:hover .volume-control__panel,
.volume-control.is-open:focus-within .volume-control__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}