#product-variant-list {
    bottom: 44px;
    z-index: 10;
    background-color: white;
    max-height: 60vh;

    .pop-up-box {
        height: 100%;
        justify-content: space-between;
        padding-bottom: 0px;

        .variant-upper-part {
            display: flex; 
            flex-flow: column;
        }

        .box-header {
            margin: 12px 16px;
        }

        .product-item {
            width: 100%;
            display: flex;
            padding: 10px 12px;

            .product-brief-image {
                min-width: 62px;
                min-height: 62px;
                max-width: 62px;
                max-height: 62px;
                background: linear-gradient(130deg, #919eab1f, #919eab80, #919eabcc) padding-box;
                animation: gradient 3s ease-in-out infinite;
                background-size: 400% 100%;
            }

            @keyframes gradient {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }

            .product-brief {
                margin-left: 16px;
                padding: 0;
                line-height: 20px;
                min-height: unset;

                .info {
                    align-items: end;
                }

                .price-box {
                    font-weight: 400;
                }

                .quantity-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-flow: row;

                    :nth-child(n) {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        min-width: 32px;
                        min-height: 32px;
                    }

                    .product-quantity {
                        margin: 0 16px;
                    }

                    .quantity-control-button {
                        border-radius: 8px;
                        border: 1px #0000003D solid;

                        .minus {
                            background-color: black;
                            -webkit-mask: url(../image/icMinus.svg) no-repeat center;
                            mask: url(../image/icMinus.svg) no-repeat center;
                        }

                        .plus {
                            background-color: black;
                            -webkit-mask: url(../image/icAdd.svg) no-repeat center;
                            mask: url(../image/icAdd.svg) no-repeat center;
                        }

                        .disabled {
                            background-color: #0000003D;
                        }
                    }
                }
            }
        }

        #variant-list {
            display: flex;
            flex-wrap: wrap;
            overflow-y: auto;
            color: #222222;
            padding: 16px 12px 0 12px;
            // -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%);
            box-shadow: 0px 1px 0px 0px #919EAB3D inset;
            overflow-y: scroll;

            .variant-option {
                font-size: 14px;
                line-height: 20px;
                border: 1px solid #BABABA;
                border-radius: 8px;
                padding: 6px 10px;
                margin-right: 8px;
                margin-bottom: 8px;
            }

            .selected {
                background-color: #01bad6;
                color: white;
            }
        }

        #checkout-button {
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            padding: 12px 16px;
            margin: 16px;
            background-color: #01bad6;
            color: white;
            text-align: center;
        }

        .line-break {
            border-top: 1px rgba(145, 158, 171, 0.12) solid;
            margin: 0;
        }
    }
}

.pop-up-list {
    position: fixed;
    width: 100%;
}

#product-variant-list.show {
    animation-name: slideIn;
    animation-duration: 0.6s;
}

#product-variant-list.show-none {
    animation-name: slideOut;
    animation-duration: 0.6s;
}

@keyframes slideOut {
    from {
        left: 0%;
        opacity: 1;
        visibility: visible;
    }
    to {
        left: 100%;
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes slideIn {
    from {
        left: 100%;
        opacity: 0;
        visibility: hidden;
    }
    to {
        left: 0%;
        opacity: 1;
        visibility: visible;
    }
}