/* Change all text and icon colors in the player. */
.vjs-owncast.video-js {
  color: var(--theme-color-components-text-on-light);
}

.vjs-owncast .vjs-big-play-button {
  z-index: 10;
  color: var(--theme-color-action);
  font-size: 8rem !important;
  border-color: transparent !important;
  border-radius: var(--theme-rounded-corners) !important;
  background-color: transparent !important;
  text-shadow: 2px 3px 4px #0000005f;

  -webkit-text-stroke: 2px white;
  text-stroke: 2px white;

  :hover {
    transition: all 0.2s ease-in-out;
    font-size: 10rem;
    text-shadow: 2px 5px 4px #00000093;
  }
}

.vjs-owncast .vjs-loading-spinner {
  z-index: 10;
  display: block;
  color: var(--theme-color-components-text-on-light);
}

.vjs-owncast .vjs-control-bar {
  color: var(--theme-color-components-text-on-light);
  background-color: var(--theme-color-background-main) !important;
}

.vjs-owncast .vjs-control {
  color: var(--theme-color-components-text-on-light);
}

.vjs-airplay .vjs-icon-placeholder::before {
  content: url('./airplay.png');
}

.vjs-quality-selector .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}
.vjs-quality-selector .vjs-icon-placeholder::before {
  content: '\f110';
}