[data-open-modal] {
	overflow: hidden;
}

dialog {
	animation: fade-out 0.3s ease-out;
	background: white;
	position: fixed;
	margin: 0;
	padding: 1.3rem;
	max-width: 100vw;
	max-width: 100svw;
	min-height: 250px;
	max-height: 100vh;
	max-height: 100svh;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

dialog[open] {
	animation: fade-in 0.3s ease-out;
}

dialog[open]::backdrop {
	animation: backdrop-fade-in 0.3s ease-out forwards;
}

dialog[data-size='xs'] {
	width: 100%;
	max-width: 450px;
}

dialog[data-size='sm'] {
	width: 100%;
	max-width: 600px;
}

dialog[data-size='md'] {
	width: 100%;
	max-width: 900px;
}

dialog[data-size='lg'] {
	width: 100%;
	max-width: 1200px;
}

dialog[data-size='xl'] {
	width: 100%;
	max-width: 1536px;
}

dialog[data-fullscreen='true'] {
	min-width: 100vw;
	min-width: 100svw;
	width: 100vw;
	width: 100svw;
	max-width: 100vw;
	max-width: 100svw;
	min-height: 100vh;
	min-height: 100svh;
	height: 100vh;
	height: 100svh;
	max-height: 100vh;
	max-height: 100svh;
	border: none;
	border-radius: 0;
}

@keyframes fade-in {
	0% {
		opacity: 0;
		display: none;
		transform: translate(-50%, 110%);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%);
		display: block;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%);
		display: block;
	}

	100% {
		opacity: 0;
		transform: translate(-50%, 110%);
		display: none;
	}
}

@keyframes backdrop-fade-in {
	0% {
		background-color: rgb(0 0 0 / 0%);
	}

	100% {
		background-color: rgb(0 0 0 / 25%);
	}
}