Video Player: V 3 Disclaimer

/* variables specific to current element */

.#{$namespace}videoPlayer {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */

	@include custom-prop-fallback("background", "sys-color-elevation-surface-flat");
	border-radius: map-deep-get($token-radius-map, "16");
	overflow: hidden;
	position: relative;
	z-index: z("zero");

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// videoPlayer__video
	&__video {

		// follows same logic as parent

		width: 100%;
		background-color: inherit;
		display: block;

	}

	#{$self}__captions {
		position: absolute;
		top: map-deep-get($token-spacer-unit-map, "12");
		right: map-deep-get($token-spacer-unit-map, "12");
		display: none;

		&:hover {
			#{$self}__singleCaption {

				display: block;

				&.-isActive {

					@include custom-prop-fallback("background", "sys-color-background-primary-100");
					@include custom-prop-fallback("background", "sys-color-text-neutral-inverse");
					cursor: pointer;

				}

			}

		}
	}

	#{$self}__singleCaption {

		display: none;
		text-align: center;
		cursor: pointer;
		width: map-deep-get($token-sizes-unit-map, "120");
		font-size: map-deep-get($design-tokens, "sys-font-size-helper-small");
		@include custom-prop-fallback("background", "sys-color-background-neutral-100");
		padding: map-deep-get($token-spacer-unit-map, "8");

		&.-isActive {display: inline-block;}

		&:hover {

			@include custom-prop-fallback("background", "sys-color-background-primary-100");
			@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

		}

	}

	#{$self}__disclaimerWrapper {

		position: absolute;
		z-index: z("medium");
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: inherit;
		@include custom-prop-fallback("background", "sys-color-background-primary-140");
		@include custom-prop-fallback("color", "sys-color-text-primary-inverse");
		overflow: hidden;

		&::before,
		&::after {

			content: "";
			position: absolute;
			z-index: z("high");
			left: 0;
			width: 100%;
			height: 3em;
			pointer-events: none;
			transition: opacity 0.15s linear;

		}

		&::before {
			top: 0;
		}

		&::after {
			bottom: 0;
		}

		&.-shadowBottom {

			#{$self}__disclaimerScrollBtn {

				opacity: 1;
				visibility: visible;

			}

		}

		&.-shadowTop::before {
			opacity: 1;
			@include gradient-directional(var(--sys-color-background-primary-140), rgba(0,0,0, var(--sys-effect-opacity-0)), 0, 100%, 180deg, false);
		}
		&.-shadowBottom::after {
			opacity: 1;
			@include gradient-directional(var(--sys-color-background-primary-140), rgba(0,0,0, var(--sys-effect-opacity-0)), 0, 100%, 0deg, false);
		}

	}

	#{$self}__disclaimerWrapperInner {

		position: absolute;
		z-index: z("zero");
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		overflow-x: hidden;
		padding: map-deep-get($token-spacer-inset-map, "md");
		scroll-behavior: smooth;

		@include media-breakpoint-up("md") {
			padding: map-deep-get($token-spacer-inset-map, "lg");
		}

		@include media-breakpoint-up("lg") {
			padding: map-deep-get($token-spacer-inset-map, "xl")*1.75;
		}

	}

	&__disclaimerScrollBtn {

		position: absolute;
		z-index: z("high")+1;
		bottom: map-deep-get($token-spacer-inset-map, "md");
		left: 50%;
		transform: translateX(-50%);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s linear, visibility 0s 0.15s linear;

	}


	/* modifiers */

	// videoPlayer -isStarted

	&.-isStarted {

		// follows same logic as base element

		&:hover {
			#{$self}__captions {
				display: block;
			}
		}
	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/
	
	// plyr vendor style overrides

	.plyr__controls {
		
		z-index: z("low");

		BUTTON[data-plyr=play], 
		BUTTON[data-plyr=pause], 
		BUTTON[data-plyr=fullscreen], 
		BUTTON[data-plyr=captions] {
			
			border-radius: 0;

			&:hover {
				@include custom-prop-fallback("background", "sys-color-background-primary-100");
			}

		}

		input[type="range"]:active::-moz-range-thumb {@include custom-prop-fallback("background", "sys-color-background-primary-100");}

		BUTTON[data-plyr=captions] {display: none;}

		.plyr__progress {

			input[type=range] {@include custom-prop-fallback("color", "sys-color-background-primary-100");}

			.plyr__progress--seek {border-radius: 0;}

			.plyr__progress--played {@include custom-prop-fallback("color", "sys-color-background-primary-100");}
			.plyr__progress--buffer,
			.plyr__progress--seek {}
		}

		.plyr__volume {
			.plyr__volume--display {@include custom-prop-fallback("color", "sys-color-background-primary-100");}
		}

		.plyr__menu {
			.plyr__control {

				border-radius: 0;

				&[aria-expanded=true],
				&:hover {@include custom-prop-fallback("background", "sys-color-background-primary-100");}

			}
		}
	}

	.plyr__play-large {@include custom-prop-fallback("background-color", "sys-color-background-primary-100");}

	.plyr__menu__container label.plyr__control input[type="radio"]:checked + span {
		@include custom-prop-fallback("background", "sys-color-background-primary-100");
	}
	.plyr__menu__container label.plyr__control input[type="radio"]:focus + span {
		box-shadow: none;
	}

	&.-posterImg {

		position: relative;

		#{$self}__fakePlayer {

			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);

		}

	}
	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}