.control-button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--player-text);
  padding: var(--player-spacing-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--player-radius-sm);
  transition: color var(--player-transition-fast) ease,
    background-color var(--player-transition-fast) ease,
    opacity var(--player-transition-fast) ease;
  cursor: pointer;
}

.control-button:hover:not(:disabled) {
  color: var(--player-primary);
  background-color: rgba(255, 255, 255, 0.08);
}

.control-button:active:not(:disabled) {
  color: var(--player-primary-active);
}

.control-button:focus-visible {
  outline: 2px solid var(--player-primary);
  outline-offset: 2px;
}

.control-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.control-button svg {
  width: var(--player-icon-md);
  height: var(--player-icon-md);
  pointer-events: none;
}

@media (max-width: 640px) {
  .control-button {
    padding: var(--player-spacing-xs);
  }

  .control-button svg {
    width: var(--player-icon-sm);
    height: var(--player-icon-sm);
  }
}