/* 
'::before' creates a pseudo-element that is the first child of the selected element. 
It is often used to add cosmetic content to an element with the content property. 
It is inline by default.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0; 
  
}


:root{
--pseudo-myBcolor: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent);
}


/*--------------------------------------------------
video-container
---------------------------------------------------*/
/*video content*/
.video-container { 
	display:inline-block; position: relative;  
	width:100%; height:100%;
	background-color: black;
 	border-radius: 10px; 
	border:0px solid red; 
 	box-sizing: border-box; 
	text-align:center; z-index:1000; 
	overflow: hidden; /*overflow:hidden; Important! hide the inactive video. The swiper to be placed herein*/
}

.video-container.active {
 	border-radius: 10px 0px 0px 10px; 
}

 

.video-container:after
 { /*to avoid the parent div's height is 0*/
	content: " ";
	display:block;
	clear:both; 
}
 


.video-container.theater,
.video-container.full-screen {
  max-width: initial;
  width: 100%;
}

.video-container.theater {
  max-height: 90vh;
}

.video-container.full-screen {
  max-height: 100vh;
}


/*--------------------------------------------------
video tag
---------------------------------------------------*/
video {
  width: 100%; 
}


/*--------------------------------------------------
video controls (the container for icons)
---------------------------------------------------*/
.video-controls-container {
  position: absolute;
 /* position: relative;*/
  top: 0; left: 0; right: 0;
  color: white; /*base color*/
  z-index: 100;
  opacity: 0; /*hidden by default -only show when hover*/
  transition: opacity 150ms ease-in-out; 
  pading:15px;  
  pading-top:20px;  
}


.video-controls-container::before {
  content: "";
  position: absolute;
  left:0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent); / **/
  background: var(--pseudo-myBcolor);
  width: 100%;
  aspect-ratio: 10 / 1; /*the height in percentage base*/
  z-index: -1; /*ensure the container sit behind the buttons*/
  pointer-events: none; /*to ensure the click event on the buttons only*/
}


/*focus-within pseudo-selector in CSS: select a parent element based on the existence or state of child elements*/
.video-container:hover .video-controls-container, 
.video-container:focus-within .video-controls-container, 
.video-container.paused .video-controls-container
{
 	opacity: 1; /*to make it appear clearly*/
}



.video-controls-container .controls {
  display: flex; /*flexible responsive layout structure without using float or positioning.*/
  gap: .5rem; /*space inbetween items inside controls box*/
  padding: .25rem;
  align-items: center; 
  
  background-color:#000; 
}



.video-controls-container .controls button {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  height: 30px;
  width: 30px;
  font-size: 1.1rem; /*best font size*/
  cursor: pointer;
  opacity: .85;
  transition: opacity 150ms ease-in-out;
  
  z-index: 1500;
}

.video-controls-container .controls button:hover {
  opacity: 1; 
  /*background-color:#F33; for testing*/
}


/*--------------------------------------------------
user action
---------------------------------------------------*/
.video-container.paused .pause-icon { /*if video is currently paused, then hide the pause-icon*/
  display: none;
}

.video-container:not(.paused) .play-icon { /*if video is currently NOT paused, then hide play-icon*/
  display: none;
}


.video-container.theater .tall { /*if video currently have a theater class, then hide class tall*/
  display: none;
}

.video-container:not(.theater) .wide { /*if video currently have not a theater class, then hide class wide*/
  display: none;
}

.video-container.full-screen .open { /*if video currently have a fullscreen, then hide open*/
  display: none;
}

.video-container:not(.full-screen) .close {  /*if video currently have not a fullscreen, then hide close classname*/
  display: none;
}


.volume-high-icon,
.volume-low-icon,
.volume-muted-icon { /*default: hide volume icon*/
  display: none;
}

.video-container[data-volume-level="high"] .volume-high-icon { /*if video currently have data-volume-level="high", show volume-high-icon*/
  display: block;
}

.video-container[data-volume-level="low"] .volume-low-icon { /*if video currently have data-volume-level="low", show volume-low-icon*/
  display: block;
}

.video-container[data-volume-level="muted"] .volume-muted-icon { /*if video currently have data-volume-level="muted", show volume-muted-icon*/
  display: block;
}


.volume-container {
  display: flex;
  align-items: center;
}

.volume-slider {
  width: 0; /*init value is 0*/
  transform-origin: left;
  transform: scaleX(0); /*init value is 0*/
  transition: width 150ms ease-in-out, transform 150ms ease-in-out;
}

.volume-container:hover .volume-slider, 
.volume-slider:focus-within {  /*when mouse hover and focus on volume-slider, then show slider bar to max*/
  width: 100px; 
  transform: scaleX(1);
}

.duration-container {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-grow: 1;
}

.video-container.captions .captions-btn {  /*when video have a caption, then show captions-btn*/
 /* border-bottom: 3px solid red;*/
  border-bottom: 10px solid red;
}

.video-controls-container .controls button.wide-btn {
  width: 50px; 
}


/*--------------------------------------------------
timeline image
---------------------------------------------------*/
.timeline-container {
 /* height: 7px;*/
  height: 13px;
  margin-inline: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center; 
  
  border:0px solid blue; margin-top: 2px; 
}

.timeline { /*the base*/
  background-color: rgba(100, 100, 100, .3);
  height: 3px;
  width: 100%;
  position: relative
}

.timeline::before {/*updated by var progress-position*/
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--preview-position) * 100%);
  background-color: rgb(150, 150, 150); /*gray*/
  display: none;
}

.timeline::after { /*updated by var preview-position*/
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--progress-position) * 100%); /*the var --progress-position value is set by JS in handleTimelineUpdate(e)*/
  background-color: red; 
}

.timeline .thumb-indicator { /*the circle indicator in the timeline*/
  --scale: 0;
  position: absolute;
  transform: translateX(-50%) scale(var(--scale));
  height: 200%;
  top: -50%;
  left: calc(var(--progress-position) * 100%);
  background-color: blue;
  border-radius: 50%;
  transition: transform 150ms ease-in-out;
  aspect-ratio: 1 / 1;
}

.timeline .preview-img {
  position: absolute;
  height: 80px;
  aspect-ratio: 16 / 9; /*for width*/
  top: 15rem; /*this property will be adjusted by JS*/
  transform: translate(-50%, -100%); /*adjust position XY*/
  left: calc(var(--preview-position) * 100%);
  border-radius: .25rem;
  border: 1px solid white;
  display: none; /*JS, display by user input*/
 
 
  /*padding: 2px;*/
  background-color: #000;  opacity: 1;
  z-index: 2000;
}

 

.thumbnail-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;  
  display: none;
}


/*--------------------------------------------------
scrubbing
---------------------------------------------------*/
.video-container.scrubbing .thumbnail-img {
  display: block;
}

.video-container.scrubbing .preview-img,
.timeline-container:hover .preview-img {
  display: block;
}

.video-container.scrubbing .timeline::before,
.timeline-container:hover .timeline::before {
  display: block;
}

.video-container.scrubbing .thumb-indicator,
.timeline-container:hover .thumb-indicator {
  --scale: 1; /*var scale*/
}

.video-container.scrubbing .timeline,
.timeline-container:hover .timeline {
  height: 100%;
}