.DialogSheet {
    background-color: white;
    position: fixed !important;
    margin: auto;
    overflow: auto;
    display: flex;
    flex-direction: column;

    inset: 0 0 0 auto;
    width: 40rem;
    height: 100%;
    max-width: calc(100vw - 2rem);
    max-height: none;
    border-radius: 6px 0 0 6px;

    &:where(.mod-right) {
        animation: slideFromRight 250ms ease;
    }

    &:where(.mod-bottom) {
        inset: auto 0 0 0;
        width: 100%;
        height: fit-content;
        max-width: none;
        max-height: calc(100dvh - 2rem);
        border-radius: 6px 6px 0 0;

        animation: slideFromBottom 250ms ease;
    }

    @keyframes scaleIn {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes slideFromBottom {
        0% {
            transform: translateY(100%);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes slideFromRight {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(0);
        }
    }
}

.DialogSheetOverlay {
    background-color: var(--black-a9);
    position: fixed;
    inset: 0;
    opacity: 0.4;
    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
