@layer base {
	[data-dialog-close] {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		padding: 1rem;
		color: var(--color-on-overlay, #fff);
		border-radius: 0.5rem;
		opacity: 0.5;
		transition: all 0.5s var(--ease-out, ease-out);
		cursor: pointer;

		&::before {
			content: '✕';
			width: 1em;
			line-height: 1em;
			display: inline-block;
		}

		&:hover {
			opacity: 1;
		}

		&:active {
			opacity: 0.5;
		}
	}

	[data-dialog-container] {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100lvh;
		z-index: 1000;

		overflow: hidden;

		max-width: unset;
		max-height: unset;
		background: transparent;

		display: flex;
		justify-content: center;
		align-items: center;

		&::backdrop {
			opacity: 0;
			background: var(--color-overlay, #808080aa);
			animation: dialog-fade-in 0.5s var(--ease-out, ease-out);
		}

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			cursor: pointer;
			z-index: -1;
		}

		&[data-dialog-container='open'],
		&[data-dialog-container='open']::backdrop {
			opacity: 1;
			transition: all 0.3s var(--ease-out, ease-out);
		}

		&[data-dialog-container='open'] [data-dialog-content] {
			transition: all 0.3s var(--ease-out, ease-out);
		}

		&[data-dialog-container=''],
		&[data-dialog-container='close'] {
			opacity: 0;
			filter: blur(6px) brightness(2);
			translate: 0 1rem;
			transition: all 0.3s var(--ease-in, ease-in);
		}

		&[data-dialog-container='close']::backdrop {
			opacity: 0;
			transition: all 0.3s var(--ease-out, ease-out);
		}

		&[data-dialog-container='close'] [data-dialog-content] {
			transition: all 0.3s var(--ease-out, ease-out);
		}
	}

	[data-dialog-content]:not(:is([data-dialog-container] *)) {
		display: none;
	}
}