.Sui-Modal{
    --sui-modal-size: auto;
    @apply fixed z-modal inset-0 h-full max-h-full flex flex-row flex-nowrap overflow-auto items-center justify-center p-4 sm:p-8;
    &__Backdrop{
        @apply fixed inset-0 backdrop-blur-sm bg-basic-800 bg-opacity-80 z-10 will-change-opacity;
    }
    &__Dialog{
        @apply w-[var(--sui-modal-size)] max-h-full flex flex-col flex-nowrap z-20 relative will-change-transform;

        >.Sui-Card__Content{
            @apply flex-auto overflow-auto visible-scrollbar;
        }
    }

    &--slim{
        --sui-modal-size: 18rem;
    }
    &--normal{
        --sui-modal-size: 35.5rem;/*theme('screens.sm');*/
    }
    &--large{
        --sui-modal-size: theme('screens.lg');
    }
    &--full{
        --sui-modal-size: 100%;
    }


    &--bottomSheet{
        /*@media (max-width: theme('screens.sm')) {*/
            @apply items-end sm:items-center px-0 pb-0 pt-8 sm:p-8 overflow-hidden;
            .Sui-Modal__Dialog {
                @apply w-full max-w-full rounded-b-none relative; /*pb-96 -mb-96 sm:pb-0;*/
                &:after{
                    content: ' ';
                    @apply absolute top-full left-0 right-0 h-[50vh] bg-[color:var(--sui-card-bg)];
                }
            }
        /*}*/
    }
    &__BottomSheetHandler{
        @apply flex justify-center items-start h-7 -mb-7 pt-2 z-30;
        &:before {
            content: '';
            @apply block w-8 h-1 bg-basic-900 bg-opacity-20 rounded;
        }
        + .Sui-Card__Header{
            @apply pt-7;
        }
    }

    /*&--limitHeight{
        .Sui-Modal__Dialog{
            @apply max-h-full flex flex-col flex-nowrap;
            >.Sui-Card__Content{
                @apply flex-auto overflow-auto visible-scrollbar;
            }
        }
    }*/

    &--fullScreen{
        @apply px-0 pb-0 pt-8;
        .Sui-Modal__Dialog{
            @apply w-full h-full flex flex-col flex-nowrap rounded-b-none;
            >.Sui-Card__Content{
                @apply flex-auto overflow-auto visible-scrollbar;
            }
        }
    }
    &--fullScreenMobile{
        @media screen and (max-width: theme('screens.sm')) {
            @apply px-0 pb-0 pt-8;
            .Sui-Modal__Dialog {
                @apply w-full h-full flex flex-col flex-nowrap rounded-b-none;

                > .Sui-Card__Content {
                    @apply flex-auto overflow-auto visible-scrollbar;
                }
            }
        }
    }
}

.has-open-modal{
    @apply lock-scroll;
}