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

dialog:modal {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
}

dialog:modal::backdrop {
    opacity: 1;
}

dialog {
    max-width: 100vw;
    min-width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    border: none;
    padding: 0;
    margin: 0;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    background: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

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;
}

dialog {
    pointer-events: none !important;
}

dialog > * {
    pointer-events: all;
}