<template>
    <div class="popup-cart-overlay" id="popup-cart-overlay">
        <div class="popup-cart-content" id="popup-cart-content">

            <img src="../assets/icons/popup-close-btn.svg" alt="close-btn" class="popup-cart-close-btn">

            <h2 class="popup-cart-title">Товар добавлен в корзину</h2>

            <div class="popup-cart-item-list">

                <!-- ITEM -->
                <div class="popup-item-wrapper">

                    <div class="popup-cart-item">
                        <div class="popup-cart-item-img">
                            <img src="../assets/images/popup-cart-item-img.png" alt="">
                        </div>

                        <div class="popup-cart-item-block">
                            <div class="popup-cart-item-header">
                                <h4>Телевизор LG OLED 77C2RLA, 77"</h4>
                                <img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
                            </div>
                            <div class="popup-cart-item-header">
                                <div class="popup-cart-item-counter">
                                    <div class="popup-cart-item-minus">-</div>
                                    <div class="popup-cart-item-count">1</div>
                                    <div class="popup-cart-item-plus">+</div>
                                </div>
                                <div class="popup-cart-item-price">58 410,50 m.</div>
                            </div>
                            <div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
                        </div>

                    </div>
                    <div class="popup-cart-footer-line"></div>
                </div>         <!-- ITEM -->
                <!-- ITEM -->
                <div class="popup-item-wrapper">

                    <div class="popup-cart-item">
                        <div class="popup-cart-item-img">
                            <img src="../assets/images/popup-cart-item-img.png" alt="">
                        </div>

                        <div class="popup-cart-item-block">
                            <div class="popup-cart-item-header">
                                <h4>Телевизор LG OLED 77C2RLA, 77"</h4>
                                <img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
                            </div>
                            <div class="popup-cart-item-header">
                                <div class="popup-cart-item-counter">
                                    <div class="popup-cart-item-minus">-</div>
                                    <div class="popup-cart-item-count">1</div>
                                    <div class="popup-cart-item-plus">+</div>
                                </div>
                                <div class="popup-cart-item-price">58 410,50 m.</div>
                            </div>
                            <div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
                        </div>

                    </div>
                    <div class="popup-cart-footer-line"></div>
                </div>         <!-- ITEM -->
                <!-- ITEM -->
                <div class="popup-item-wrapper">

                    <div class="popup-cart-item">
                        <div class="popup-cart-item-img">
                            <img src="../assets/images/popup-cart-item-img.png" alt="">
                        </div>

                        <div class="popup-cart-item-block">
                            <div class="popup-cart-item-header">
                                <h4>Телевизор LG OLED 77C2RLA, 77"</h4>
                                <img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
                            </div>
                            <div class="popup-cart-item-header">
                                <div class="popup-cart-item-counter">
                                    <div class="popup-cart-item-minus">-</div>
                                    <div class="popup-cart-item-count">1</div>
                                    <div class="popup-cart-item-plus">+</div>
                                </div>
                                <div class="popup-cart-item-price">58 410,50 m.</div>
                            </div>
                            <div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
                        </div>

                    </div>
                    <div class="popup-cart-footer-line"></div>
                </div>         <!-- ITEM -->
                <!-- ITEM -->
                <div class="popup-item-wrapper">

                    <div class="popup-cart-item">
                        <div class="popup-cart-item-img">
                            <img src="../assets/images/popup-cart-item-img.png" alt="">
                        </div>

                        <div class="popup-cart-item-block">
                            <div class="popup-cart-item-header">
                                <h4>Телевизор LG OLED 77C2RLA, 77"</h4>
                                <img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
                            </div>
                            <div class="popup-cart-item-header">
                                <div class="popup-cart-item-counter">
                                    <div class="popup-cart-item-minus">-</div>
                                    <div class="popup-cart-item-count">1</div>
                                    <div class="popup-cart-item-plus">+</div>
                                </div>
                                <div class="popup-cart-item-price">58 410,50 m.</div>
                            </div>
                            <div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
                        </div>

                    </div>
                    <div class="popup-cart-footer-line"></div>
                </div>         <!-- ITEM -->

            </div> <!--Popup-cart-item-list-->

            <div class="popup-cart-footer">
                <div class="popup-cart-footer-results">
                    <div class="">В корзине 2 товара</div>
                    <div class="">Итого: 69 521,61 м.</div>

                </div>

                <div class="popup-cart-footer-line"></div>

                <div class="popup-cart-footer-results">
                    <div class="">Оформить заказ</div>
                    <button type="button" class="popup-cart-btn" id="popup-cart-btn">Продолжить покупки 🠆</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "mini-card"
}
</script>

<style scoped>

.popup-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.popup-cart-overlay.active {
    pointer-events: all;
    opacity: 1;
}

.popup-cart-content {
    position: relative;
    width: 100%;
    max-width: 635px;
    display: flex;
    flex-direction: column;
    padding: 40px 0 0 40px;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    transform: translateX(100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px 8px rgba(0, 0, 0, 0.3);
}

.popup-cart-item-list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 40px;
    transition: all 0.3s ease-out;
}

.popup-cart-item-list::-webkit-scrollbar {
    width: 14px;
    border-radius: 0;
    background-color: transparent;
    border: 1px #e6e6e6 solid;
}

.popup-cart-item-list::-webkit-scrollbar-track-piece {
    margin-right: -100px;
}

.popup-cart-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.popup-item-trash {
    cursor: pointer;
    padding: 6px;
}

.popup-cart-item-list::-webkit-scrollbar-track {
    margin-left: -100px;
    border-radius: 0;
    background-color: transparent;
}

.popup-cart-item-list::-webkit-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s ease-out;
    background-color: #e6e6e6;
    border-radius: 0;
}

.popup-cart-item-img {
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 6px;
    margin-right: 20px;
}

.popup-cart-item-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.popup-cart-item {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-out;
}

.delete-cart-item {
    opacity: 0;
    height: 0;
    pointer-events: none;
    transition: all 0.3s ease-out;
}

.popup-cart-item-header h4 {
    font-size: 18px;
}

.popup-cart-item-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-cart-footer {
    padding: 20px 0;
}

.popup-cart-item-price {
    font-size: 18px;
    font-weight: 700;
}

.popup-cart-item-counter {
    display: flex;
    gap: 10px;
    padding: 5px 10px;
    font-weight: 600;
    border-radius: 6px;
    background-color: #f2f2f2;
}

.popup-cart-item-counter div {
    padding: 5px 10px;
}

.popup-cart-item-plus {
    cursor: pointer;
}

.popup-cart-item-minus {
    cursor: pointer;
}

.popup-cart-item-footer {
    font-size: 12px;
}

.popup-cart-footer {
    padding-right: 40px;
}

.popup-cart-footer-line {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
    margin: 20px 0;
}

.popup-cart-btn {
    background-color: #c3000e;
    font-size: 16px;
    padding: 20px;
    border-radius: 6px;
    color: #fff;
    border: 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.popup-cart-btn:hover {
    background-color: #a5000b;
    font-size: 16px;
    padding: 20px;
    border-radius: 6px;
    color: #fff;
    border: 0;
    font-weight: 600;
    cursor: pointer;
}

.popup-cart-overlay.active .popup-cart-content {
    background-color: #fff;
    transform: translateX(0%);
}
.popup-cart-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 50px;
}

.popup-cart-footer-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #4e4e4e;
    font-size: 14px;
}

.popup-cart-footer-results div {
    font-size: 14px;
}

</style>