@keyframes dialog-fade-in {
	from {
		opacity: 0;
		translate: 0 1rem;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

body:has(dialog[open]) {
	overflow: hidden;
}

dialog,
[popover] {
	padding: 1rem 2ch;
	border: 0.125rem solid var(--col-bg3);
	border-radius: 
		var(--br-tl, var(--border-radius))
		var(--br-tr, var(--border-radius))
		var(--br-br, var(--border-radius))
		var(--br-bl, var(--border-radius));
	color: var(--col-fg);
	background: var(--col-bg);
	animation: dialog-fade-in calc(0.1s * var(--enable-animation, 1)) ease-out;

	&:has(> header) {
        padding: 0;

        & > * {
            padding: 1rem;
        }
    }

	> header {
		background: var(--col-bg3);
		padding: 1rem 2ch;
		font-weight: 700;
	}
}

dialog {
	&::backdrop {
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(4px);
		animation: fade-in calc(0.1s * var(--enable-animation, 1)) ease-out;
	}
}