_sg-video.scss

// Vars ---------------------------------------------------------------- //
$basicLightbox__background: rgba(0, 0, 0, 0.8) !default;
$basicLightbox__zIndex: 1000 !default;
$basicLightbox__duration: 0.4s !default;
$basicLightbox__timing: ease !default;

:root {
	--sg-video-component-color-headline: #0a293b;
	--sg-video-component-color-foreground: #174566;
	--sg-video-component-color-background: none;
	--sg-video-component-color-link: #15415e;
	--sg-video-component-color-play-button: #fff;
	--sg-video-component-color-link--hover: #061924;
}

$sg-video-icon-solid-play: "data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'/%3e%3c/svg%3e"
448px 512px;
$sg-video-icon-solid-chevron-down: "data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3e%3c/svg%3e"
448px 512px;

$sg-video-item-heading-color: var(--sg-video-component-color-headline);
$sg-video-item-text-color: var(--sg-video-component-color-foreground);
$sg-video-item-background-color: var(--sg-video-component-color-background);
$sg-video-read-more-color: var(--sg-video-component-color-link);
$sg-video-read-more-color--hover: var(--sg-video-component-color-link--hover);
$sg-video-mobile-breakpoint: var(--sg-video-mobile-breakpoint, 768px);
$sg-video-box-shadow: 0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);
$sg-video-base-transition-timing: var(--sg-video-base-transition-timing, 0.3s);
//$sg-video-icon-solid-play: var(--sg-video-icon-solid-play);
$sg-video-base-transition-timing-fast: var(--sg-video-base-transition-timing-fast, 0.1s);
$sg-video-screen-lg: 1200px;
$sg-video-screen-md: 992px;
$sg-video-screen-sm: 768px;
$sg-video-screen-xs: 576px;
$sg-video-screen-sm-max: $sg-video-screen-sm - 0.02px;
$sg-video-screen-md-max: $sg-video-screen-md - 0.02px;
$sg-video-screen-lg-max: $sg-video-screen-lg - 0.02px;
$sg-video-screen-xs-max: $sg-video-screen-xs - 0.02px;
$sg-video-screen-sm-min: $sg-video-screen-sm;
$sg-video-screen-md-min: $sg-video-screen-md;
$sg-video-screen-lg-min: $sg-video-screen-lg;
$sg-video-screen-xs-min: $sg-video-screen-xs;

.tx-sg-youtube {
	margin-bottom: 20px;

	iframe {
		border: 0;
	}
}

.tx-sg-vimeo {
	margin-bottom: 20px;

	iframe {
		border: 0;
	}
}

.sg-video {
	&__image {
		width: 100%;
		height: auto;
		transition: transform $sg-video-base-transition-timing ease;

		&--shorts {
			height: auto;
			aspect-ratio: 9 / 16;
			object-fit: cover;

			max-height: 900px;
		}
	}

	&__image-container {
		position: relative;
		overflow: hidden;
		width: 100%;
		color: var(--sg-video-component-color-play-button);
		display: block;

		&:not(.no-lightbox) svg {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 40px;
			height: 50px;
			transform: translate(-50%, -50%) scale(0.8);
			opacity: 0.8;
			transition: opacity $sg-video-base-transition-timing,
			transform $sg-video-base-transition-timing;
			z-index: 9;
			text-shadow: -1px 4px 27px rgba(0, 0, 0, 0.5);
		}

		&:hover,
		&:focus {
			text-decoration: none;

			.sg-video__image {
				transform: scale(1.1);
			}

			&::after {
				transform: translate(-50%, -50%) scale(1.1);
			}
		}
	}

	&__read-more {
		padding: 10px 0;
		display: inline-block;
		cursor: pointer;
		width: 100%;
		text-align: left;
		margin-top: auto;
		text-decoration: none;
		font-weight: 700;
		text-transform: lowercase;
	}

	&__bodytext {
		padding: 10px 0;
		margin-top: auto;
		margin-bottom: auto;
		min-height: 90px;

		@media ($sg-video-screen-lg) {
			padding: 20px;
		}

		h3 {
			color: $sg-video-item-heading-color;
			margin-top: 0;
			padding-top: 0;
		}

		.sg-video__description {
			/** https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp **/
			display: -webkit-box; //stylelint-disable-line
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.sg-video__description.expanded {
			-webkit-line-clamp: unset;
		}
	}

	&__item {
		box-shadow: $sg-video-box-shadow;
		background: $sg-video-item-background-color;
	}

	&__list {
		margin-bottom: 0;
		list-style: none;
		padding-left: 0;
	}

	&__highlight {
		.sg-video__item {
			display: flex;
			flex-direction: column;
		}

		.sg-video__image {
			object-fit: scale-down;
		}
	}

	@media (min-width: $sg-video-screen-lg) {
		&__list-item--alt {
			.sg-video__item {
				display: flex;
			}

			.sg-video__image-container {
				width: 50%;
			}

			.sg-video__bodytext {
				width: 50%;
				background: transparent;
				padding: 0 5px 0 20px;
			}
		}
	}

	&--playlist {
		@media (min-width: $sg-video-screen-lg) {
			display: grid;
			gap: 20px;
			grid-template-columns: 70% auto;
			position: relative;
		}
	}

	&__list--playlist {
		display: flex;
		flex-direction: row;
		position: relative;

		> div {
			@media (min-width: $sg-video-screen-lg) {
				position: absolute;
				height: 100%;
				width: 100%;
				overflow-y: auto;
				flex-direction: column;
				flex-grow: 1;
				justify-content: space-between;

				.sg-video__list-item:not(:last-child) {
					margin-bottom: 15px;
				}
			}
		}

		.sg-video__item {
			height: 100%;
		}

		.sg-video__bodytext {
			padding: 10px 0 0;
		}

		h3 {
			font-size: 1.3em;
		}
	}

	&__list-item {
		position: relative;
		margin: 15px 10px;

		@media (min-width: $sg-video-screen-lg) {
			margin: auto;
		}

		&--alt {
			@media (min-width: $sg-video-screen-lg) {
				margin: 0;
			}
		}
	}

	@media (max-width: $sg-video-screen-sm-max) {
		.sg-video__list--playlist {
			display: block;
		}
	}

	&__list--default {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;

		> li {
			width: 100%;
			margin: 10px;
			display: flex;
			flex-direction: column;

			@media (min-width: $sg-video-screen-lg) {
				width: calc(33.3333% - 20px);
			}
		}

		a {
			box-shadow: none;
		}

		.sg-video__bodytext {
			position: relative;
			display: block;
			overflow: hidden;
			padding: 10px 0;
			transition: max-height $sg-video-base-transition-timing-fast; // stylelint-disable-line
		}

		.sg-video__read-more {
			display: block;
			width: 100%;
			text-align: left;
			margin-top: auto;
		}

		.sg-video__item {
			flex-grow: 1;
		}

		@media (max-width: $sg-video-mobile-breakpoint - 1px) {
			img {
				min-height: 0 !important; // stylelint-disable-line
			}
		}
	}

	&__read-more {
		background: none;
		color: $sg-video-read-more-color;
		border: 0;

		&:hover {
			color: $sg-video-read-more-color--hover;
		}

		svg {
			display: inline-block;
			width: 13px;
			height: 10px;
			transition: transform $sg-video-base-transition-timing;
		}

		&.disabled {
			display: none;
		}
	}

	&__list--rows {
		.sg-video__read-more {
			&.disabled {
				display: none !important; // stylelint-disable-line
			}
		}

		.sg-video__image {
			object-fit: contain;
		}

		@media (min-width: $sg-video-screen-md) {
			.sg-video__item {
				box-shadow: none;
				background-color: transparent;
				display: flex;
			}

			.sg-video__image-container {
				float: left;
				clear: left;
				width: 40.5%;

				span {
					position: relative;
				}

				@media (min-width: $sg-video-screen-lg) {
					width: 35%;
				}
			}

			.sg-video__bodytext {
				position: relative;
				box-shadow: $sg-video-box-shadow;
				margin-left: auto;
				display: block;
				min-height: 210px;

				@media (min-width: $sg-video-screen-lg) {
					width: 65%;
					min-height: 225px;
					padding-top: 0;
					padding-left: 20px;
				}
			}

			.sg-video__description {
				-webkit-line-clamp: 5;
				transition: max-height $sg-video-base-transition-timing-fast; // stylelint-disable-line
			}

			.sg-video__list-item {
				margin-bottom: 25px;
			}

			.sg-video__read-more {
				display: block;
				padding: 20px 0 0;
			}
		}
	}
}

.sg-video__read-more.expanded .sg-video__read-more-arrow {
	transform: rotateX(180deg);
}

.sg-video-lightbox-wrapper {
	pointer-events: all;
	padding: 0;
	margin: 0;
}

.no-lightbox svg {
	display: none;
}

.plyr .sg-cookie-optin-iframe-consent {
	min-height: 410px;
}

// basicLightbox ------------------------------------------------------- //
.basicLightbox {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: $basicLightbox__background;
	opacity: 0.01; // Start with .01 to avoid the repaint that happens from 0 to .01
	transition: opacity $basicLightbox__duration $basicLightbox__timing;
	z-index: $basicLightbox__zIndex;
	will-change: opacity;

	::after {
		content: '';
		position: absolute;
		top: 1.8rem;
		right: 1.8rem;
		width: 2em;
		height: 2em;
		background-size: contain;
		background-image: url("data:image/svg+xml,%3Csvg width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
		background-repeat: no-repeat;
		cursor: pointer;
	}

	&--visible {
		opacity: 1;
		pointer-events: auto;
	}

	&__placeholder {
		max-width: 100%;
		transform: scale(0.9);
		transition: transform $basicLightbox__duration $basicLightbox__timing;
		z-index: 1;
		will-change: transform;

		> img:first-child:last-child,
		> video:first-child:last-child,
		> iframe:first-child:last-child {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

		> video:first-child:last-child,
		> iframe:first-child:last-child {
			pointer-events: auto;
		}

		> img:first-child:last-child,
		> video:first-child:last-child {
			width: auto;
			height: auto;
		}
	}

	&--img &__placeholder,
	&--video &__placeholder,
	&--iframe &__placeholder {
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	&--visible &__placeholder {
		transform: scale(1);
	}
}

iframe.sg-video-youtube-shorts-iframe {
	aspect-ratio: 9 / 16;

	&.sg-video-iframe {
		width: 90vw;
		max-width: 480px;
		height: auto;
		max-height: 900px;
		margin: 0 auto;
	}
}

iframe.sg-video-iframe {
	width: 100%;
	height: auto;
	max-width: 900px;
	aspect-ratio: 16/9;
}

.sg-video-filters {
	gap: 10px;
	display: flex;
	flex-direction: row;
	align-items: baseline;
}