@use "@fontsource/nunito-sans/scss/mixins" as NunitoSans;
$fontsourceDir: "~@fontsource";
@include NunitoSans.faces($weights: (200, 300, 400, 500, 600, 700, 800, 900));
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "video.js/dist/video-js.css";
@import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
@import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css";

.vjs-tubo .vjs-poster img {
  object-fit: cover;
}

.vjs-tubo .vjs-control-bar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.vjs-tubo .vjs-volume-control {
  background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 45%);
  backdrop-filter: blur(1px);
}

.vjs-tubo .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

.vjs-tubo .vjs-current-time, .vjs-tubo .vjs-time-divider, .vjs-tubo .vjs-duration {
  display: block;
}

.vjs-tubo .vjs-big-play-button, .vjs-tubo.vjs-paused .vjs-big-play-button, .vjs-tubo:hover .vjs-big-play-button {
  background: none;
  border: none;
}