//------------------------------------------------------------------------------------------------
// YOUTUBE
//------------------------------------------------------------------------------------------------

.c-youtube {
	position: relative;
	background-color: #000000;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
	border-radius: $global-border-radius-large;
	width: 100%;
}

.c-youtube__inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
}

.c-youtube__preview {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.5;
}

.c-youtube__loading {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.c-youtube iframe	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.c-youtube img {
	width: 100%;
	height: auto;
	position: absolute;
	cursor: pointer;
	left: 0;
}

.c-youtube__play {
	width: rem(50px);
	height: rem(50px);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	fill: white;
	pointer-events: none;
	&:focus {
		fill: color('primary-dark');
		outline: none;
	}
}

.c-youtube.is-active {
	& .c-youtube__play,
	& .c-youtube__cover,
	& .c-youtube__preview {
		display: none;
	}
}

@include mq(md) {
	.c-youtube__play {
		width: rem(75px);
		height: rem(75px);
	}
}