dialog::backdrop {
    background: var(--color-modal-backdrop);
    opacity: 0;
}

dialog[open]::backdrop {
    opacity: 1;
}

dialog {
    max-width: 100dvw;
    min-width: 100dvw;
    max-height: 100dvh;
    min-height: 100dvh;
    border: none;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    border: none;
    align-items: center;
    justify-content: center;
}

dialog[open] {
    display: flex;
}

dialog.sheet-left {
    justify-content: flex-start;
    align-items: stretch;
}

dialog.sheet-right {
    justify-content: flex-end;
    align-items: stretch;
}

dialog.sheet-top {
    justify-content: stretch;
    align-items: flex-start;
}

dialog.sheet-bottom {
    justify-content: stretch;
    align-items: flex-end;
}