.video-wrapper {
	position:relative;
	
	button {
		background:transparent;
		border:0;
		padding:0;
	}

	video {
		height:100%;
		width:100%;
		object-fit: cover;
	}

	&:has(.play-overlay[data-state="play"]) video {
		@include transition(opacity $standard-animation-time ease);
		opacity: 0.5 !important;
	}

	.controls {
		transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
		opacity:0;
		visibility:hidden;

		&[data-state="hidden"] { 
			opacity:0;
			visibility:hidden;
		}

		&[data-state="visible"] { 
			opacity:1;
			visibility:visible;
		}

		.progress-wrapper { 
			display:flex;
			align-items:center;
			flex-grow:1;
			height:20px;

			progress { 
				display:inline-flex;
				width:100%;
				border:none;
				background:rgba(255,255,255,0.25);
				overflow:hidden;


				span { 
					width:0%;
					height:100%;
					display:inline-block;
					background-color:white;
				}
			}
			
			progress,
			progress[data-state="fake"] { 
				transition:height 0.2s ease-in-out, border-radius 0.2s ease-in-out;
				height: 4px;
				background:rgba(255,255,255,0.25);
				border-radius: 4px;
			}

			progress::-webkit-progress-bar { 
				background:rgba(255,255,255,0.25);
			}

			progress::-moz-progress-bar { background: white; }
			progress::-webkit-progress-value { background: white; }
			progress { color: white; }

			&:hover {
				progress,
				progress[data-state="fake"] { 
					height: 8px;
					border-radius: 8px;
				}
			}
		}

		.playpause { 
			font-size:0;
			color:transparent;
			outline:none;
			width:60px;
			height:60px;
			background-repeat:no-repeat;
			background-size:30px;
			background-position:center;

			&[data-state="play"] { 
				background-repeat:no-repeat;
				background-image:url('../images/play.svg?1636448141');
				background-size:29px auto;
			}

			&[data-state="pause"] { 
				background-repeat:no-repeat;
				background-image:url('../images/pause.svg?1636448301');
				background-size:29px auto;
			}
		}

		.mute { 
			font-size:0;
			color:transparent;
			outline:none;
			width:60px;
			height:60px;
			background-repeat:no-repeat;
			background-size: 20px auto !important;
			background-position: center;
			margin-left: 20px;

			&[data-state="mute"] { 
				background-repeat:no-repeat;
				background-image:url('../images/mute.svg?1636448155');
				background-size:100% auto;
			}

			&[data-state="unmute"] { 
				background-repeat:no-repeat;
				background-image:url('../images/unmute.svg?1636448166');
				background-size:100% auto;
			}
		}

		.time {
			color: $color-white;
		}
	}

	.controls-bottom { 
		position:absolute;
		bottom:18px;
		left:24px;
		right:24px;
		display:flex;
		align-items:center;
	}

	.controls-center { 
		position: absolute;
		top: 50%;
		left: 50%;
		@include transform(translate(-50%, -50%));
		display: flex;
		align-items: center;
	}

	.video-controls[data-state="visible"] .controls-center .play-overlay:hover {
		@include transform(scale(1.1));
	}

	.play-overlay { 
		--size:  100px;

		font-size:0;
		color:transparent;
		outline:none;
		width: var(--size);
		height: var(--size);
		cursor: pointer;
		background-repeat:no-repeat;
		background-size:30px;
		background-position:center;
		@include transition(transform 0.3s ease);

		position: absolute;
		top: calc(50% -  (var(--size) / 2));
		left: calc(50% -  (var(--size) / 2));

		&[data-state="play"] { 
			background-repeat:no-repeat;
			background-image:url('../images/play.svg?1636448141');
			background-size:var(--size) auto;
		}

		&[data-state="pause"] { 
			background-repeat:no-repeat;
			background-image:url('../images/pause.svg?1636448301');
			background-size:var(--size) auto;
		}
	}

}