[data-view=presentation] {
	scroll-snap-type: both mandatory;
	font-size: clamp(100%, 1.5vw, 125%);
	background-color: hsl(0, 0%, 15%);
}

@media (prefers-color-scheme: dark) {
	[data-view=presentation] {
		background-color: hsl(0, 0%, 5%);
	}
}

[data-view=presentation] body {
	all: unset;
}

[data-view=presentation] :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
}

[data-view=presentation] h1 {
	font-size: var(--size-900);
}

[data-view=presentation] :is(h2, h3, h4, h5, h6):only-child {
	font-size: var(--size-800);
}

[data-view=presentation] :is(h2, h3, h4, h5, h6) {
	font-size: var(--size-700);
}


/**
 * Slide Layout
 *
 * Divides slide by 2 sections: heading and body;
 * the rest of space is divided evenly in ratio 1:2 with an ::after hack.
 */

[data-view=presentation] .slide {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: space-between;
	width: 100vw;
	min-height: 100vh;
	padding-block: clamp(1.5rem, 5vw, 3rem);
	padding-inline: max(clamp(1.5rem, 5vw, 3rem), (100vw - var(--slide-inline-size, 70ch)) / 2);
	scroll-snap-align: start;
	background-color: var(--background-color);
	box-shadow:
		0 .25rem .25rem rgb(0 0 0 / .3),
		0 .5rem .75rem .375rem rgb(0 0 0 / .15);
}

[data-view=presentation] .slide::after {
	content: '';
	margin-block-start: auto;
}

[data-view=presentation] :where(.slide) > * {
	inline-size: 100%;
	margin-block-end: auto;
}

[data-view=presentation] :where(.slide) > :where(h1, h2, h3, h4, h5, h6, hgroup, header):where(:only-child) {
	margin-block-start: auto;
}


/**
 * Spacing
 *
 * 1.  Reduces effect of auto spacing between section when combined with slides.
 * 2.  Resets spacing for slides, ignoring possible space in the end of
 *     the presentation.
 */

[data-view=presentation] .slide + * {
	margin-block-start: unset; /* 1 */
}

[data-view=presentation] .slide {
	margin-block: var(--space-700); /* 2 */
}


/**
 * View Toggle
 *
 * Enables extra content for presentations,
 * e.g. headings repeating on long sections
 */

:where(.presentation.only) {
	display: none;
}

[data-view=presentation] .presentation {
	display: unset;
}

[data-view=presentation] .not.presentation {
	display: none;
}