video-controls {
  display: flex;
  gap: var(--space-8);
}

video-controls :is([data-control='play-pause'], [data-control='mute-unmute']) {
  background-color: var(--scheme-secondary-button-background);
  color: var(--scheme-secondary-button-text);
  border-radius: var(--space-32);
  block-size: var(--space-32);
  inline-size: var(--space-32);
  padding: var(--space-6);
  transition: background-color var(--transition-short);

  &:hover {
    background-color: rgb(from var(--scheme-secondary-button-background) r g b / 80%);
  }
}

video-controls :is([data-control='play-pause'], [data-control='mute-unmute']) span {
  display: grid;
  place-content: center;
}

video-controls [data-control='play-pause'][data-state='pause'] [data-video-control-icon-play] {
  display: none;
}

video-controls [data-control='play-pause'][data-state='play'] [data-video-control-icon-pause] {
  display: none;
}

video-controls [data-control='mute-unmute'][data-state='mute'] [data-video-control-icon-unmute] {
  display: none;
}

video-controls [data-control='mute-unmute'][data-state='unmute'] [data-video-control-icon-mute] {
  display: none;
}