figure[data-cc-video] {
	position: relative;
}

/* Fullscreen button, sits with the theme's sound / play buttons */
figure[data-cc-video] .cc-fullscreen {
	display: flex;
	align-items: center;
	margin-left: 4px;
	cursor: pointer;
}
figure[data-cc-video] .cc-fullscreen .cc-fs-exit,
figure[data-cc-video].cc-is-fullscreen .cc-fullscreen .cc-fs-enter {
	display: none;
}
figure[data-cc-video].cc-is-fullscreen .cc-fullscreen .cc-fs-exit {
	display: block;
}

/* Timeline */
figure[data-cc-video] .cc-timeline {
	--cc-progress: 0%;
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	left: 30px;
	bottom: 30px;
	z-index: 10;
	/* !important: the theme's layout rules centre and cap the width of every child of the figure */
	width: calc(100% - 150px) !important;
	max-width: none !important;
	height: 16px;
	margin: 0 !important;
	padding: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: all;
	touch-action: none;
	opacity: 0.85;
	transition: opacity 0.2s;
}
figure[data-cc-video] .cc-timeline:hover,
figure[data-cc-video] .cc-timeline:focus-visible {
	opacity: 1;
}
figure[data-cc-video] .cc-timeline::-webkit-slider-runnable-track {
	height: 2px;
	background: linear-gradient(to right, #d9d9d9 var(--cc-progress), rgba(217, 217, 217, 0.3) var(--cc-progress));
}
figure[data-cc-video] .cc-timeline::-moz-range-track {
	height: 2px;
	background: linear-gradient(to right, #d9d9d9 var(--cc-progress), rgba(217, 217, 217, 0.3) var(--cc-progress));
}
figure[data-cc-video] .cc-timeline::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;
}
figure[data-cc-video] .cc-timeline::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;
}

@media (max-width: 768px) {
	figure[data-cc-video] .cc-timeline {
		left: 16px;
		width: calc(100% - 116px) !important;
		bottom: 16px;
	}
}

/* Fullscreen layout */
figure[data-cc-video].cc-is-fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #000;
}
figure[data-cc-video].cc-is-fullscreen video {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
}
figure[data-cc-video].cc-is-fullscreen .controls,
figure[data-cc-video].cc-is-fullscreen .cc-timeline {
	transition: opacity 0.3s;
}
figure[data-cc-video].cc-is-fullscreen.cc-idle {
	cursor: none;
}
figure[data-cc-video].cc-is-fullscreen.cc-idle .controls,
figure[data-cc-video].cc-is-fullscreen.cc-idle .cc-timeline {
	opacity: 0;
}

figure[data-cc-video] video {
	cursor: pointer;
}