:root{
    --sui-drawer-size: 250px;
}

.Sui-Drawer{
    @apply absolute top-0 bottom-0 left-0 h-full shrink-0 grow-0 max-w-full overflow-hidden;
    &__Backdrop{
        @apply hidden fixed inset-0 backdrop-blur-sm bg-basic-800 bg-opacity-80 z-10 will-change-opacity;
    }
    &__Dialog{
        @apply w-[var(--sui-drawer-size)] h-full flex flex-col flex-nowrap  z-20 will-change-transform rounded-none transition-none;

        >.Sui-Card__Content{
            @apply flex-auto overflow-auto;/* visible-scrollbar;*/
        }
    }
    &__Close{
        @apply hidden fixed top-2 z-20;
    }

    &--anchor-left{
        .Sui-Drawer__Dialog {
            @apply left-0 right-auto shadow-drawerLeft /*rounded-l-none pl-14 -ml-14;*/
        }
        .Sui-Drawer__Close{
            @apply right-2;
        }
    }
    &--anchor-right{
        .Sui-Drawer__Dialog {
            @apply right-0 left-auto shadow-drawerRight /*rounded-r-none pr-14 -mr-14;*/
        }
        .Sui-Drawer__Close{
            @apply left-2;
        }
    }

    &--floating{
        @apply fixed z-modal inset-0 h-full max-w-full overflow-hidden;
        .Sui-Drawer__Backdrop{
            @apply block;
        }
        .Sui-Drawer__Dialog {
            @apply fixed top-0 bottom-0;
        }
        .Sui-Drawer__Close {
            @apply inline-flex;
        }
    }
    &__Wrapper{
        @apply relative pl-[var(--sui-drawer-size)];
        &--floating{
            @apply pl-0;
        }
    }
}

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