.p-media_viewer_modal__header {
  background: $bg;
  box-shadow: 0 0 0 1px $borderLight;
}

.p-media_viewer_modal__footer {
  background: $bg;
  @include pane;
}

.p-media_viewer_modal {
  color: $fg;
  box-shadow: 0 0 0 1px $borderLight;
  background: $contrast;

  .p-media_viewer__video {
    background: $contrast;
  }
}

.p-media_viewer_modal__blurry_background {
  background-color: $contrast;
}

.p-media_viewer_modal__blurry_background_overlay {
  background: $overlay;
}

.p-media_viewer_modal--transparency_fix_themed_blur .p-media_viewer_modal__multimedia_video {
  background: $bg;
}

.p-media_viewer_modal__navigation__button {
  color: $fg;
  background: $button;

  &:hover {
    background: $accent;
    color: $selectFg;
    box-shadow:
      0 0 0 1px $borderLight,
      0 4px 12px 0 $borderLight;
  }
}

.p-media_controls_toolbar {
  color: $fg;
  background: $bg;
}

.p-media_controls_toolbar__bar {
  background: $bg;
}

.p-media_viewer_modal__flexpane {
  @include pane;
  background: $bg;
}

.p-media_viewer_modal__flexpane__hide {
  color: $text;
}

.p-media_viewer_modal__header__divider {
  border-left: 1px solid $border;
}

.p-media_viewer_modal__reactions__reaction {
  background: $bg;
}

.p-media_viewer_modal__reactions__reaction:hover {
  box-shadow: inset 0 0 0 1px $accentT;
  background: $bg2;
  color: $primary;
}

.p-media_viewer_modal__reactions__reaction--reacted,
.p-media_viewer_modal__reactions__reaction--reacted:hover {
  background: $active;
  box-shadow: inset 0 0 0 1px $accent;
}

.p-media_viewer_modal__reactions__reaction--reacted .p-media_viewer_modal__reactions__reaction__count:not(:empty) {
  color: $primary;
}

.p-media_viewer_modal__reactions__add {
  background: $button;
  color: $fg;
}

.p-media_viewer_modal__reactions__add:hover {
  box-shadow: inset 0 0 0 1px $primary;
  background: $hl;
  color: $selectFg;
}

.p-media_viewer_modal__reactions__add__cookie {
  color: $yellow;
}

.p-media_viewer_modal__multimedia_video {
  background: $contrast;
}

.p-media_viewer_modal__footer__button {
  background: $button;
  color: $fg;
}

.p-media_viewer_modal__footer__button_captions--on {
  background: $green;
}

.p-media_viewer_modal__zoom_control {
  .p-zoom__control_group {
    color: $text;
  }

  .p-zoom__slider {
    &::-moz-range-thumb {
      background: $accent;
    }

    &::-moz-range-track {
      background: $contrast;
    }

    &::-webkit-slider-thumb {
      background: $accent;
    }

    &::-webkit-slider-runnable-track {
      background: $contrast;
    }

    &::-ms-thumb {
      background: $accent;
    }

    &::-ms-track {
      background: $contrast;
    }
  }
}

.p-media_viewer_modal__zoom_control .p-zoom__control_group {
  background-color: transparent;
  color: $text;
}

.p-media_viewer_modal__zoom_control .p-zoom__slider::-moz-range-thumb {
  background: $accent;
}

.p-media_viewer_modal__zoom_control .p-zoom__slider::-moz-range-track {
  background: $hl;
}

.p-media_viewer_modal__zoom_control .p-zoom__slider::-webkit-slider-thumb {
  background: $accent;
}

.p-media_viewer_modal__zoom_control .p-zoom__slider::-webkit-slider-runnable-track {
  background: $hl;
}

.p-media_viewer_modal__zoom_control .p-zoom__slider::-ms-thumb {
  background: $accent;
  box-shadow: none;
}

.p-media_viewer_modal__zoom_control .p-zoom__slider::-ms-track {
  background: $hl;
}

.p-media_viewer_modal--design-polish {
  .p-media_viewer_modal__icon_button:hover {
    background: $hl;
  }

  .p-media_viewer_modal__playback_speed_button {
    color: $text;

    .c-select_button__icon {
      color: $text;
    }
  }

  .p-media_viewer_modal__zoom_control .p-media_viewer_modal__zoom_icon_button {
    color: $text;
  }

  .p-media_viewer_modal__playback_speed_button {
    .c-select_button__icon:hover,
    &:hover {
      color: $primary;
    }
  }

  .p-media_viewer_modal__zoom_control .p-media_viewer_modal__zoom_icon_button:hover {
    color: $primary;
  }

  .p-media_viewer_modal__playback_speed_button {
    &:hover {
      background: $bg;
    }
  }

  .p-media_viewer_modal__tabs_close--fullscreen {
    background: $bg;
  }

  .p-media_progress_bar {
    background: hsla(0, 0%, 100%, 0.5);
  }

  .p-media_progress_bar__bar {
    background: $accentT;
  }

  .p-media_progress_bar--scrubbable {
    &:hover {
      .p-media_progress_bar__bar {
        &:after {
          background: $accent;
        }
      }
    }
  }

  .p-media_viewer_modal__header__gradient {
    background: linear-gradient($contrast, rgba(29, 28, 29, 0));
  }

  .p-media_viewer_modal__footer__gradient {
    background: linear-gradient(rgba(29, 28, 29, 0), $contrast);
  }

  .p-media_viewer_modal__header .c-icon,
  .p-media_viewer_modal__header__channel_info,
  .p-media_viewer_modal__header__info .c-icon--hash-medium,
  .p-media_viewer_modal__header__name {
    color: $fg;
  }

  .p-media_viewer_modal__header span {
    &.c-channel_entity__name,
    &.c-timestamp__label {
      color: $fg;
    }
  }

  .p-media_viewer_modal__flexpane {
    background: $bg;
  }
}

.p-media_scrubber_reactions_overlay__dot:before {
  background: $selectBg;
}

.p-media_scrubber_reactions_overlay__dot--reacted:before {
  background: $accentT;
}

.p-media_scrubber_reactions_overlay__dot--single:not(.p-media_scrubber_reactions_overlay__dot--reacted):before {
  background: none;
}

.p-media_viewer_slides {
  background: $contrast;
}

.p-huddle_compact_video_pane--container .p-peer_tile__overflow_text {
  background-color: $fg;
}

.p-media_viewer_modal:not(.p-media_viewer_modal--transparency_fix_themed_blur),
.sk-client-theme--dark .p-media_viewer_modal.p-media_viewer_modal--transparency_fix_themed_blur {
  .p-media_viewer_modal__playback_speed_button {
    color: $text;

    .c-select_button__icon {
      color: $text;
    }
  }

  .p-media_viewer_modal__zoom_control .p-media_viewer_modal__zoom_icon_button {
    color: $text;
  }
}

.p-media_viewer_modal:not(.p-media_viewer_modal--transparency_fix_themed_blur) {
  .p-media_viewer_modal__playback_speed_button {
    .c-select_button__icon:hover,
    &:hover {
      color: $selectFg;
    }
  }

  .p-media_viewer_modal__zoom_control .p-media_viewer_modal__zoom_icon_button:hover {
    color: $selectFg;
  }
}

.sk-client-theme--dark .p-media_viewer_modal.p-media_viewer_modal--transparency_fix_themed_blur {
  .p-media_viewer_modal__playback_speed_button {
    .c-select_button__icon:hover,
    &:hover {
      color: $selectFg;
    }
  }

  .p-media_viewer_modal__zoom_control .p-media_viewer_modal__zoom_icon_button:hover {
    color: $selectFg;
  }
}

.p-media_viewer_modal:not(.p-media_viewer_modal--transparency_fix_themed_blur)
  .p-media_viewer_modal__playback_speed_button:hover,
.sk-client-theme--dark
  .p-media_viewer_modal.p-media_viewer_modal--transparency_fix_themed_blur
  .p-media_viewer_modal__playback_speed_button:hover {
  background: $contrast;
}

.p-media_viewer_modal {
  &.p-media_viewer_modal--transparency_fix_themed_blur {
    .p-media_viewer_modal__header__gradient {
      background: $bg;
    }

    .p-media_viewer_modal__footer__gradient {
      background: $bg;
    }
  }

  &:not(.p-media_viewer_modal--transparency_fix_themed_blur) {
    .p-media_viewer_modal__header {
      .c-icon {
        color: $selectFg;
      }

      span {
        &.c-channel_entity__name,
        &.c-timestamp__label {
          color: $selectFg;
        }
      }
    }

    .p-media_viewer_modal__header__channel_info,
    .p-media_viewer_modal__header__info .c-icon--hash-medium,
    .p-media_viewer_modal__header__name,
    .p-media_viewer_modal__one_click_reactions {
      color: $selectFg;
    }
  }

  &.p-media_viewer_modal--transparency_fix_themed_blur .p-media_viewer_modal__header span.c-timestamp__label {
    color: $fg;
  }

  &:not(.p-media_viewer_modal--transparency_fix_themed_blur) .p-media_viewer_modal__header__info {
    text-shadow: 1px 1px 4px $bg2;
  }

  &.p-media_viewer_modal--transparency_fix_themed_blur .p-media_viewer_modal__blurry_background {
    background-color: $bg;
  }

  &:not(.p-media_viewer_modal--transparency_fix_themed_blur) .p-media_viewer_modal__multimedia_video {
    .c-button--focus-visible:focus,
    .c-select_button:focus,
    .p-media_volume_slider__track:focus {
      box-shadow:
        0 0 0 1px $bg,
        0 0 0 5px $tree;
    }
  }
}

.p-media_viewer_modal__one_click_reactions .p-media_reactions_one_click_bar__button:hover {
  background: $hl;
}

.p-media_viewer_modal .p-image_viewer__image--png {
  background: $bg;
}
