dialog[data-dialog] { --dialog-space: 1.5rem; color-scheme: light; width: min(100% - 2rem, 30rem); border: 0; border-radius: var(--dialog-space); padding: var(--dialog-space); color: var(--black); background: var(--white); opacity: 0; translate: 0 0.5rem; transition: opacity var(--transition-duration) ease, translate var(--transition-duration) ease, display var(--transition-duration) allow-discrete, overlay var(--transition-duration) allow-discrete; &:open { opacity: 1; translate: 0; } &::backdrop { background: color-mix(in oklch, var(--black) 72%, transparent); opacity: 0; transition: opacity var(--transition-duration) ease, display var(--transition-duration) allow-discrete, overlay var(--transition-duration) allow-discrete; } &:open::backdrop { opacity: 1; } @starting-style { &:open { opacity: 0; translate: 0 0.5rem; } &:open::backdrop { opacity: 0; } } }