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

  .vjs-volume-bar.vjs-slider-horizontal {
    width: 100px;
    flex-shrink: 0;
  }

  .vjs-menu li {
    color: var(--theme-color-components-text-on-dark);
  }

  .vjs-big-play-button {
    z-index: 10;
    color: var(--theme-color-action);

    // Setting the font size resizes the video.js
    // BigPlayButton due to its style definitions
    // (see https://github.com/videojs/video.js/blob/b306ce614e70e6d3305348d1b69e1434031d73ef/src/css/components/_big-play.scss)
    // 30vmin determined by trial & error to not cause
    // overflow with weird (small) x or y dimensions.
    // min and max are also arbitrary; max was the old
    // constant value. feel free to change if necessary,
    // but check short and narrow screen sizes for overflow
    // issues.
    font-size: clamp(1rem, 30vmin, 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-loading-spinner {
    z-index: 10;
    display: block;
    color: var(--theme-color-components-text-on-light);
  }

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

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

.vjs-airplay {
  .vjs-icon-placeholder::before {
    content: url('../airplay.svg');
    width: 50% !important;
    height: 50% !important;
    top: 15% !important;
    left: 15% !important;
  }
}

.vjs-quality-selector {
  .vjs-icon-placeholder {
    font-family: VideoJS, serif;
    font-weight: 400;
    font-style: normal;

    &::before {
      content: '\f114';
    }
  }
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
  color: var(--theme-color-components-video-live-indicator) !important;
}