@import "../../../styles/utilities";
.menuNavigationProductListDesktop{
    @screen sm {
        @apply hidden;
    }

    @screen xl {
        @apply block;
    }
}
.menuNavigationProductListMobile{
    @apply relative transition-all duration-100;
    &.isShow{
        &::after{
            content: "";
            background: rgba(0, 0, 0, 0.5);
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100vh;
            position: fixed;
            z-index: 9999;
        }
    }
    .menuNavigationProductModal{
        @apply transition-all duration-200;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 10000;
        transform: translateY(100%);

        &.animation{
            transform: translateY(0%)
        }
        .content{
            @apply  absolute w-full h-full;
            margin-top: 3rem;
            padding-top: 10rem ;
            padding-bottom: 10rem;
            background-color: white;
            overflow-y: auto;
            height: 96%;
            bottom: 0;
            border-radius: 2.4rem 2.4rem 0 0;
            .head{
                @apply flex justify-between fixed;
                top:0;
                left:0;
                margin-top: 3rem;
                border-radius: 2.4rem 2.4rem 0 0;
                padding: 4rem 2rem 2rem 2rem;
                width: 100%;
                background-color: white;
                z-index: 10000;
                h3{
                    @apply heading-3 font-bold;
                    color:var(--text-base);
                }
            }
            .foot{
                @apply fixed;
                bottom: 0;
                left:0;
                width: 100%;
                background-color: white;
                padding: 0 1rem 3rem 1rem;
                
            }
            button{
                margin-top: 2rem;
                width: 100%;
            }
        }
    }
}