/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Buttons
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where([data-media-button]) {
  border-radius: var(--media-button-border-radius, 0);
  color: var(--media-button-color, #f5f5f5);
  width: var(--media-button-size, 48px);
  height: var(--media-button-size, 48px);
  transition: transform 0.2s ease-out;
  touch-action: manipulation;
}

:where([data-media-button] > shadow-root svg) {
  width: var(--media-button-icon-size, 66.666%);
  height: var(--media-button-icon-size, 66.666%);
}

:where([data-media-button] > shadow-root) {
  display: contents;
}

:where([data-media-button]:not([default-appearance]) > shadow-root:not(:only-child)) {
  display: none;
}

:where([data-media-button]:not([aria-expanded='true']):hover) {
  transform: var(--media-button-hover-transform, scale(1.1));
  transition: transform 0.2s ease-in;
}

:where([data-media-button] [slot]) {
  display: none !important;
}

:where([data-media-button]) :where(media-icon[slot], svg[slot]) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--media-button-icon-border-radius, 2px);
}

:where(
    media-toggle-button[data-pressed] [slot='on'],
    media-toggle-button:not([data-pressed]) [slot='off'],
    media-play-button[data-paused]:not([data-ended]) [slot='play'],
    media-play-button[data-ended] [slot='replay'],
    media-play-button:not([data-paused]) [slot='pause'],
    media-mute-button[data-volume='high'] [slot='volume-high'],
    media-mute-button[data-volume='low'] [slot='volume-low'],
    media-mute-button[data-volume='muted'] [slot='volume-muted'],
    media-mute-button[data-volume='muted'] [slot='mute'],
    media-mute-button:not([data-volume='muted']) [slot='unmute'],
    media-pip-button:not([data-pip]) [slot='enter'],
    media-pip-button[data-pip] [slot='exit'],
    media-caption-button:not([data-pressed]) [slot='off'],
    media-caption-button[data-pressed] [slot='on'],
    media-fullscreen-button:not([data-fullscreen]) [slot='enter'],
    media-fullscreen-button[data-fullscreen] [slot='exit'],
    media-seek-button:not([seconds*='-']) [slot='forward'],
    media-seek-button[seconds*='-'] [slot='backward'],
    media-menu [data-media-menu-button][data-pressed] [slot='close'],
    media-menu [data-media-menu-button]:not([data-pressed]) [slot='open']
  ) {
  display: inline-block !important;
}

:where([data-media-button][aria-hidden='true']) {
  display: none;
}