@import url("./prism.css");

/* VideoJS Styles */
/* Change all text and icon colors in the player. */
.vjs-custom.video-js {
  color: oklch(var(--foreground));
}

/* Style the big play button */
.vjs-custom .vjs-big-play-button {
  background: oklch(var(--primary));
  border: none;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  font-size: 3rem;
}

.vjs-custom .vjs-big-play-button:hover {
  background: oklch(var(--primary) / 0.6) !important;
}

.vjs-custom:hover .vjs-big-play-button {
  background: oklch(var(--primary));
}

.vjs-custom .vjs-big-play-button .vjs-icon-placeholder::before {
  top: 5px;
  left: 1px;
}

/* Change the color of various "bars". */
.vjs-custom .vjs-volume-level,
.vjs-custom .vjs-play-progress,
.vjs-custom .vjs-slider-bar {
  background: oklch(var(--primary));
}

.vjs-custom .vjs-control-bar {
  background: linear-gradient(180deg, oklch(var(--background) / 0) 0%, oklch(var(--background) / 0.8) 100%); ;
}