:root {
	--set-radius: calc(var(--main-sizes) * 0.5);
	--set-width: calc(var(--main-sizes) * 16);
	--set-space: calc(var(--main-sizes) * 0.5);
	--set-veil: rgba(0, 0, 0, 0.5);
	--set-text: rgba(var(--base-dark), 1);
	--set-field: 240px;
}

html[data-modal],
html[data-modal] body {
	overflow: hidden;
}

modal {
	backdrop-filter: blur(0.2rem);
	background: var(--set-veil);
	padding: var(--set-space);
	overflow-y: auto;
	position: fixed;
	z-index: 9999;
	display: flex;
	inset: 0;
}

modal > content {
	padding: clamp(calc(var(--set-space) * 1.5), 5vw, calc(var(--set-space) * 2.5));
	background: rgba(var(--sand-lite), 1);
	border-radius: var(--set-radius);
	max-width: var(--set-width);
	color: var(--set-text);
	position: relative;
	width: 100%;
	margin: auto;
}

modal form {
	flex-direction: column;
	gap: var(--set-space);
	display: flex;
}

modal form > button[type="button"] {
	font-size: calc(var(--main-sizes) * 1);
	height: calc(var(--main-sizes) * 1);
	width: calc(var(--main-sizes) * 1);
	right: var(--set-space);
	top: var(--set-space);
	position: absolute;
	background: none;
	min-width: unset;
	cursor: pointer;
	color: inherit;
	padding: 0;
	border: 0;
}

modal item {
	gap: var(--set-space);
	flex-wrap: wrap;
	display: flex;
}

modal item:is([data-copy], [data-legal], [data-output]) {
	display: block;
}

modal[hidden],
modal item[hidden] {
	display: none;
}

modal item[data-copy] {
	margin-bottom: calc(var(--main-sizes) * 0.5);
}

modal item label {
	flex: 1 1 var(--set-field);
}

modal item label span {
	font: 600 calc(var(--main-texts) * 0.7)/1.5em var(--font-texts);
	margin-bottom: calc(var(--main-sizes) * 0.25);
	text-transform: uppercase;
	display: inline-block;
}

modal item :is(input, textarea) {
	width: 100%;
	font: 400 calc(var(--main-texts) * 0.9)/1.5em var(--font-texts);
	padding: calc(var(--main-texts) * 0.5) calc(var(--main-texts) * 0.75);
	border: thin solid rgba(var(--base-dark), 0.25);
	border-radius: calc(var(--set-radius) * 0.25);
	background: transparent;
	box-sizing: border-box;
	display: block;
	resize: none;
}

modal item[data-output] {
	font: 400 calc(var(--main-texts) * 1.0)/1.5em var(--font-texts);
	color: rgba(var(--teal-dark), 1.0);
}


modal :is(input, textarea)[aria-invalid="true"] {
	border-color: rgba(var(--reds-dark), 1);
}

modal :is(h1, h2, h3, h4, h5),
modal item[data-output="error"] {
	margin-bottom: calc(var(--set-space) * 0.5);
	color: rgba(var(--reds-dark), 1);
}


modal item button[type="submit"][disabled] {
	cursor: progress;
	opacity: 0.6;
}

modal :focus-visible {
	border-color: currentColor;
}