src/static/scripts/components/mediaViewer/videoPlayer/_videoPlayer.scss
@use 'sass:math';
@use '../../../../style/vars';

.videoPlayer {
	width: 100%;
	height: 100%;
	--height-hint: unset;

	.initialIcon {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 7rem;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
		pointer-events: none;
		opacity: 1;
		transition: opacity .125s ease .075s;

		&.none {
			opacity: 0;
		}
	}

	video {
		width: 100%;
		display: block;
		object-fit: contain;
		max-height: 100%;
	}

	&.loading video {
		min-height: var(--height-hint);
	}

	&.noVideo {
		line-height: 3rem;
	}
}

.isInFullscreen {
	.videoPlayer {
		video {
			height: 100%;
		}
	}
}

.mediaViewer .controls {
	.volumeWrapper {
		display: flex;
		align-items: center;
		transition: all .5s ease;

		> .progressBar {
			&:hover {
				background: vars.$primary-transparent;
			}

			.accessibilitySpacer {
				transform: scaleY(2);
			}

			width: 5rem;
			height: .4rem;
			margin: auto 0;
			background: black;
		}

		&.remove {
			opacity: 0;
			visibility: hidden;
		}
	}

	.timeTextHover {
		position: absolute;
		top: -1.5rem;
		padding: 0 0.6rem;
		line-height: 2rem;
		width: max-content;
		transform: translateX(-50%) scaleY(math.div(1, vars.$progress-bar-hover-scale));
		background: vars.$tooltip-bg;
		border-radius: 1rem;
		opacity: 0;
		visibility: collapse;
		transition: visibility .25s ease, opacity .25s ease;

		&.show {
			visibility: visible;
			opacity: 1;
		}
	}
}

.mediaViewer.isInFullscreen:not(.controlsVisible) .videoPlayer {
	cursor: none;
}
