/**
 * @section Baseline Styles
 */

@layer kelp.core {
	/**
	 * Add box sizing to everything
	 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
	 */
	*,
	*:before,
	*:after {
		box-sizing: border-box;
	}

	/**
	 * 1. Hold space for scrollbar to prevent jumping on pages.
	 * 2. Prevent iOS text size adjust after orientation change, without disabling
	 *    user zoom.
	 */
	html {
		font-size: var(--font-size-base);
		scroll-behavior: smooth;
		scrollbar-gutter: stable; /* 1 */
		/* 2 */
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/**
	 * 1. Remove the margin in all browsers (opinionated).
	 * 2. Force the body to fill the viewport
	 * 3. Prevent overflow in breakout containers
	 */
	body {
		font-family: var(--font-primary);
		line-height: var(--line-height-m);
		margin: 0; /* 1 */
		min-height: 100vh; /* 2 */
		overflow-x: clip; /* 3 */
	}

	/**
	 * Add block-end margin to various elements
	 */

	:where(
			p,
			ol,
			ul,
			dl,
			dd,
			form,
			fieldset,
			audio,
			video,
			iframe,
			blockquote,
			details,
			table,
			pre,
			figure,
			address
		) {
		margin: 0;
		margin-block-end: var(--space);
	}

	:where(
			p,
			ol,
			ul,
			dl,
			dd,
			form,
			fieldset,
			audio,
			video,
			iframe,
			blockquote,
			details,
			table,
			pre,
			figure,
			address
		):last-child {
		margin-block-end: 0;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		margin-block: 0 var(--size-m);
	}

	:where(h1) {
		margin-block-start: var(--size-4xs);
	}

	:where(h2) {
		margin-block-start: var(--size-5xl);
	}
}

@layer kelp.state {
	/**
	 * Focus styles
	 */
	:is(
			button,
			[href],
			input,
			select,
			textarea,
			summary,
			[tabindex]
		):focus-visible {
		outline-color: var(--focus-ring-color);
		outline-style: var(--focus-ring-style);
		outline-width: var(--focus-ring-width);
		outline-offset: var(--focus-ring-offset);
	}

	/**
	 * 1. Ensure [hidden] takes priority over other display properties
	 * 2. Hide web components with the [hide-until-ready] attribute before instantiation
	 * 3. If there's a [show-until-ready] attribute, hide everything else before instantiation
	 * 4. Hide content with a [show-until-ready] after instantiation
	 */
	[hidden] /* 1 */,
	[hide-until-ready]:not([is-ready]):not(:has(> [show-until-ready])) /* 2 */,
	:not([is-ready]):has(> [show-until-ready]) > :not([show-until-ready]) /* 3 */,
	[is-ready] [show-until-ready] /* 4 */ {
		display: none;
	}

	/**
	 * Remove all animations and transitions for people that prefer not to see them
	 */
	@media (prefers-reduced-motion: reduce) {
		*,
		:after,
		:before {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}