@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "flowbite";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite.min";

/* 4.166666499999998 is directly related to the w-11/12 class applied below. */ 
/* This value represents half of the empty space leftover. */

.video-js .vjs-tech{
  @apply flex;
  @apply flex-col;
  @apply mx-auto;
}

.video-js div.vjs-control-bar {
  @apply text-sm;
  @apply bg-black;
  @apply w-screen;
  @apply sm:max-w-[507px];
  @apply left-[-4.166666499999998%];
} 

div > div.vjs-play-progress.vjs-slider-bar {
  @apply bg-frankly-teal;
  @apply border-frankly-teal-200;
  @apply text-frankly-teal;
}

.video-js .vjs-big-play-button {
  border: none;
  background: none;
  font-size: 5rem;
}

.video-js .vjs-current-time.vjs-time-control.vjs-control, .video-js .vjs-remaining-time.vjs-time-control.vjs-control {
  display: inline-block;
}

:not(.vjs-has-started) .vjs-control-bar {
  display: flex;
}

.field_with_errors {
  display: contents;
}

/* Video.js Text Track Styling - Simple and Clean */
.vjs-text-track-display {
  @apply pointer-events-none;
  @apply absolute;
  @apply bottom-0;
  @apply left-0;
  @apply right-0;
  @apply top-0;
  z-index: 9999;
}

/* Position the CC popup to the left of the button */
.video-js .vjs-subs-caps-button .vjs-menu {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-50%) !important;
}

.vjs-text-track-cue > div {
  @apply absolute;
  @apply left-0;
  @apply right-0;
  @apply text-center;
  @apply bg-black;
  @apply bg-opacity-80;
  @apply text-white;
  @apply px-2;
  @apply py-1;
  @apply mx-auto;
  @apply max-w-4xl;
  @apply rounded;
  @apply text-base;
  @apply font-medium;
  @apply leading-relaxed;
  @apply text-xl;
  position: absolute !important;
  bottom: 40px !important;
  top: auto !important;
}