@font-face {
	font-family: Outfit Variable;
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url('./outfit-variable.woff2') format('woff2');
}

iframe {
	border: 0;
	border-radius: var(--radius--m);
	width: 100%;
	min-height: 25lh;
}

.Iframe--narrow {
	min-height: 12lh;
}

.is-hidden {
	display: none;
}

.RichText > :first-child {
	margin-top: 0;
}

.ButtonList {
	padding: 0;
}

.LogoList {
	padding: 0;
}

.LogoList img {
	height: 2lh;
}

.Form-error {
	display: none;
}

label:has(.Form-error):has(+ :user-invalid) .Form-error {
	display: block;
}

.MigrationForm-output {
	margin-top: var(--spacing-block--l);
}

.ExamplePage {
	min-height: 100%;
	background: var(--color-paper--100);
	color: var(--color-black--100);
}

.ExamplePage iframe {
	aspect-ratio: 16 / 9;
	min-height: 0;
}

.ExamplePage .orejime-Env {
	font-size: 0.875rem;
}

.ExamplePage .orejime-Purpose-input {
	accent-color: var(--orejime-color-interactive);
}

.ExampleMain {
	padding: var(--spacing-block--l) var(--spacing-inline--xl);
}

.ExampleGrid {
	grid-template-columns: repeat(var(--grid-algorithm), minmax(20ch, 1fr));
	gap: var(--spacing-block--l) var(--spacing-inline--xl);
}

.ExampleReset {
	--orejime-color-interactive: royalblue;
	--orejime-color-on-interactive: white;
	display: none;
	position: fixed;
	right: 1.4em;
	bottom: 1.4em;
}

body:not(:has(.orejime-Banner)):not(:has(.orejime-Modal)) .ExampleReset {
	display: block;
}

/**
 * We're using the actual code as doc by making the script's
 * contents visible.
 */
.ExampleCode {
	display: block;
	line-height: 1.6;
	font-family:
		Menlo,
		Consolas,
		Monaco,
		Liberation Mono,
		Lucida Console,
		monospace;
	tab-size: 3;
	overflow-x: auto;
}
