/**
 * Teso Video Player v1.0.0
 * Copyright Teso
 * https://www.teso.io/
 */

.teso-video-player {
	--accent-player-color: #ffffff;
	--background-player-color: #005450;
	--controls-height: 35px;

	width: fit-content;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
	font-style: inherit;
	color: var(--accent-player-color);
}

.teso-video-player .video-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--player-roundness, 0);
	overflow: hidden;
}

.teso-video-player video {
	display: block;

	/*
	 * Make video fit 100% with any screen resolution:
	 *	- Forcing the video to have a min-width and min-height of 100% will stretch it to fill.
	 *	- Set width and height to auto to keep the video's aspect ratio.
	 * @link https://css-tricks.com/fluid-width-video/
	 * @link https://stackoverflow.com/a/36950349
	*/
	min-width: 100%;
	width: auto;
	min-height: 100%;
	height: 100%;
	object-fit: cover;
}

.teso-video-player .controls {
	position: absolute;
	bottom: 0;
	list-style-type: none;
	display: none;
	box-sizing: border-box;
	width: 100%;
	height: var(--controls-height);
	justify-content: space-between;
	align-items: center;
	padding: 0 0.5rem;
	margin: 0;
	opacity: 0.7;
	background-color: var(--background-player-color);
	direction: ltr;
}

.teso-video-player .controls > * {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0.2rem;
}

.teso-video-player .controls button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px;
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.teso-video-player .controls button svg {
	width: 22px;
	aspect-ratio: 1 / 1;
	fill: var(--accent-player-color);
}

.teso-video-player .play-pause-btn {
	--size: 20;
	--offset: 4;
	display: inline-block;
	border: 0;
	background: transparent;
	box-sizing: border-box;
	height: calc(var(--size) * 1px);
	border-color: transparent transparent transparent var(--accent-player-color);
	transition: 100ms all ease;
	cursor: pointer;
	border-style: solid;
	border-width: calc(var(--size) / 2 * 1px) 0 calc(var(--size) / 2 * 1px) calc((var(--size) - var(--offset)) * 1px);
}

.teso-video-player .play-pause-btn:hover {
	border-color: transparent transparent transparent var(--accent-player-color);
}

.teso-video-player [data-icon='pause'] .play-pause-btn {
	border-style: double;
	border-width: 0 0 0 calc((var(--size) - var(--offset)) * 1px);
}

.teso-video-player .controls button.fullscreen[data-disabled='true'] {
	display: none;
}

.teso-video-player .controls button.fullscreen .compress { display: none;  } /* Default */

.teso-video-player .controls button.fullscreen[data-icon='expand'] .expand	 { display: block; }
.teso-video-player .controls button.fullscreen[data-icon='expand'] .compress { display: none;  }

.teso-video-player .controls button.fullscreen[data-icon='compress'] .expand   { display: none;  }
.teso-video-player .controls button.fullscreen[data-icon='compress'] .compress { display: block; }

.teso-video-player .controls button.volume[data-icon='mute'] .off	 { display: block; }
.teso-video-player .controls button.volume[data-icon='mute'] .low	 { display: none;  }
.teso-video-player .controls button.volume[data-icon='mute'] .medium { display: none;  }
.teso-video-player .controls button.volume[data-icon='mute'] .high	 { display: none;  }

.teso-video-player .controls button.volume[data-icon='low'] .off	{ display: none;  }
.teso-video-player .controls button.volume[data-icon='low'] .low	{ display: block; }
.teso-video-player .controls button.volume[data-icon='low'] .medium { display: none;  }
.teso-video-player .controls button.volume[data-icon='low'] .high	{ display: none;  }

.teso-video-player .controls button.volume[data-icon='medium'] .off	   { display: none;  }
.teso-video-player .controls button.volume[data-icon='medium'] .low	   { display: none;  }
.teso-video-player .controls button.volume[data-icon='medium'] .medium { display: block; }
.teso-video-player .controls button.volume[data-icon='medium'] .high   { display: none;  }

.teso-video-player .controls button.volume[data-icon='high'] .off	 { display: none;  }
.teso-video-player .controls button.volume[data-icon='high'] .low	 { display: none;  }
.teso-video-player .controls button.volume[data-icon='high'] .medium { display: none;  }
.teso-video-player .controls button.volume[data-icon='high'] .high	 { display: block; }

.teso-video-player .playback-progress-wrapper {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0.4rem;
}

.teso-video-player .progress {
	--value: 0;
	--clickable-offset: 14px;
	position: relative;
	display: block;
	width: 100%;
	height: 3px;
	padding: var(--clickable-offset) 0;
	box-sizing: content-box;
	background-color: var(--accent-player-color);
	background-clip: content-box;
	cursor: pointer;
}

.teso-video-player .progress::before {
	content: '';
	position: absolute;
	top: var(--clickable-offset);
	left: 0;
	height: calc(100% - (2 * var(--clickable-offset)));
	width: calc(var(--value) * 1%);
	border-radius: inherit;
	background: var(--accent-player-color);
}

.teso-video-player .progress::after {
	content: '';
	position: absolute;
	top: calc(var(--clickable-offset) - 3px);
	left: calc((var(--value) * 1%) - 4px);
	height: 9px;
	width: 9px;
	border-radius: 50%;
	background-color: var(--accent-player-color);
}

.teso-video-player .progress--vertical {
	width: 3px;
	height: 100%;
	padding: 0 var(--clickable-offset);
}

.teso-video-player .progress--vertical::before {
	top: 0;
	left: var(--clickable-offset);
	width: calc(100% - (2 * var(--clickable-offset)));
	height: calc(var(--value) * 1%);
}
.teso-video-player .progress--vertical::after {
	top: unset;
	left: calc(var(--clickable-offset) - 3px);
	bottom: calc((var(--value) * 1%) - 4px);
}

.teso-video-player .volume-option {
	position: relative;
}

.teso-video-player .volume-option:hover .volume-progress-wrapper {
	display: flex;
}

.teso-video-player .volume-progress-wrapper.show {
	display: flex;
}

.teso-video-player .volume-progress-wrapper {
	position: absolute;
	bottom: calc(var(--controls-height) - 1px);
	display: none;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100px;
	padding: 1rem 0;
	box-sizing: border-box;
	background-color: var(--background-player-color);
}

.teso-video-player .screen-icon {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 75px;
	background-color: var(--background-player-color);
	opacity: 0.7;
	transition: opacity 0.2s linear;
}

.teso-video-player .screen-icon[data-icon="play"] {
	cursor: pointer;
}

.teso-video-player .screen-icon[data-icon="play"] .loader {
	display: none;
}

.teso-video-player .screen-icon[data-icon="play"]::before {
	content: '';
	width: 40px;
	height: 40px;
	margin-left: 4px;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	border-color: transparent transparent transparent var(--accent-player-color);
	box-sizing: border-box;
}

.teso-video-player .screen-icon[data-icon="play"]:hover {
	opacity: 0.5;
}

.teso-video-player .screen-icon[data-icon="loader"]::before {
	display: none;
}

.teso-video-player .screen-icon[data-icon="loader"]:hover {
	opacity: 0.7;
}

.teso-video-player .screen-icon[data-icon="loader"] .loader {
	display: block;
	height: 50%;
	aspect-ratio: 1 / 1;
	fill: var(--accent-player-color);
	animation: spin 2s infinite linear;
}

@keyframes spin {
	from {
		transform:rotate(0deg);
	}

	to	{
		transform:rotate(360deg);
	}
}