:root.dark-theme .modal {
	--shadow-color: color-mix(in srgb, black 15%, transparent);
	background-color: var(--col-contrast);
	&::backdrop {
		background-color: color-mix(in srgb, black 90%, transparent);
	}
}
.modal {
	--shadow-color: color-mix(in srgb, var(--col-text) 15%, transparent);
	color: var(--col-text);
	background-color: var(--col-background);
	border: none;
	border-radius: var(--md);
	padding-block: var(--lg);
	padding-inline: var(--lg);
	box-shadow: 0 var(--xxs) var(--xs) var(--shadow-color);
	transition: var(--transition-slow);
	@starting-style {
		translate: 0 calc(var(--md) * -1);
	}

	&,
	&::backdrop {
		opacity: 1;
		transition-timing-function: ease-out;
		@starting-style {
			opacity: 0;
		}
	}

	&::backdrop {
		background-color: color-mix(in srgb, var(--col-text) 25%, transparent);
		backdrop-filter: blur(var(--sm));
		transition: var(--transition-slow);
		@starting-style {
			backdrop-filter: blur(0);
		}
	}
}
.modal--is-closing {
	translate: 0 calc(var(--md) * -1);
	transition-duration: var(--transition);

	&,
	&::backdrop {
		opacity: 0;
		transition-timing-function: ease-in;
	}

	&::backdrop {
		backdrop-filter: blur(0);
	}
}