/* Presenter & projector views */

.projector #timer {
	display: none;
}

.presenter .slide.next {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 100;
}

.presenter.show-next .slide.next {
	transform: scale(.2);
}

.presenter.show-next .slide.next:hover {
	transform: scale(.5);
}

.presenter-only:not(.presenter *),
.presenter .presenter-hide {
	display: none;
}

.presenter :where(.delayed, .delayed-children > *):not(.displayed, .current) {
	opacity: .2;
}

.slide[data-offset] {
	&::after {
		content: "On time! 🎉";
		position: absolute;
		top: 0;
		left: .2em;
		font-weight: bold;
		color: hsl(90 80% 80%);
	}

	&[data-running="ahead"]::after {
		content: attr(data-offset) " ahead";
		color: hsl(70 80% 80%);
	}

	&[data-running="behind"]::after {
		content: "⚠️ " attr(data-offset) " behind";
		color: hsl(0 90% 85%);
	}
}