/* ==========================================================================
STYLES
========================================================================== */

#agents-test {
	background-image: url(../../../images/agents-bg.webp);
	background-size: cover;
	position: relative;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, .5);
		z-index: 1;
	}
	video {
		transition: opacity 0.25s ease;
		opacity: 1;
		display: block;
		max-width: none;
		width: 100%;
		height: auto;
		aspect-ratio: 9/12;
		object-fit: cover;
		object-position: 45% 0;
		/* transition: filter .5s ease-out; */
		position: relative;
		z-index: 2;
	}
	.agents-controls,
	.lang-controls {
		text-align: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		width: 75px;
		p {
			font-size: 12px;
		}
		.buttons {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		button {
			background-color: rgba(255, 255, 255, .8);
			font-size: 10px;
			width: 40px;
			height: 40px;
			border: 2px solid #9e9e9e;
			padding: 0;
			aspect-ratio: 1/1;
			border-radius: 50%;
			margin-block-start: .5rem;
			&:hover,
			&.active {
				background-color: var(--wp--preset--color--tertiary);
			}
			&.btn-sound {
				background-image: url(../assets/icon-sound-on.svg);
				background-repeat: no-repeat;
				background-position: center;
			}
		}
	}
	.lang-controls {
		right: calc(var(--wp--custom--main-size) * .5);
	}
	.agents-controls {
		left: calc(var(--wp--custom--main-size) * .5);
		button {
			border-width: 3px;
			&.active {
				border-color: var(--wp--preset--color--tertiary);
			}
		}
	}
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFF;
		z-index: 2;
		opacity: 0;
		transition: opacity .15s ease-out;
	}
	&.loading {
		video {
			opacity: 0;
		}
	}
}

@media (min-width: 768px) {
	#agents-test {
		video {
			aspect-ratio: 16/9;
			object-position: 50% 0;
		}
		.agents-controls,
		.lang-controls {
			width: 90px;
		}
		.lang-controls {
			right: 5%;
		}
		.agents-controls {
			left: 5%;
		}
	}
}

@media (min-width: 992px) {
	.section-home-agents-test {
		.wrap-button {
			display: block;
			bottom: calc(var(--wp--custom--main-size) * 3.5);
		}
		.meta-channels {
			padding-inline: var(--wp--custom--main-size);
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			img {
				max-width: 400px;
			}
		}
	}
	#agents-test {
		video {
			height: auto;
			aspect-ratio: unset;
			object-position: 50% 0;
		}
		.lang-controls {
			right: 15%;
		}
		.agents-controls {
			left: 15%;
			button {
				width: 50px;
				height: 50px;
			}
		}
	}
}

@media (min-width: 1200px) {
	#agents-test {
		video {
			height: calc(100vh - 73px);
			aspect-ratio: unset;
			object-position: 50% 0;
		}
	}
}