/* -------------------------------------------
    360 Degree Gallery
        1. Base
        2. Gallery
        3. Navigation
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/direction';

// 1. Base
.product-360-popup .mfp-content {
    max-width: 83rem;
}
.product-gallery-degree {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize;

    .product-360-popup & {
        position: absolute;
    }
}
@media (max-width: 869px) {
    .product-gallery-degree {
        width: calc(100vw - 40px)!important;
        max-height: 100vw;
    }
}
@media (max-height: 539px) {
    .product-gallery-degree {
        height: calc(100vh - 40px)!important;
        max-width: 166vh;
    }
}

// 2. Gallery
.product-gallery-degree {
    .product-degree-images {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: var(--alpha-change-color-light-1);
        position: relative;
        &:after {
            content: '';
            border-color: rgba(175, 175, 175, 0.05) rgba(175, 175, 175, 0.1) rgba(175, 175, 175, 0.15);
            border-radius: 50%;
            border-style: solid;
            border-width: 2px 2px 4px;
            bottom: 60px;
            height: 50%;
            #{$left}: 50px;
            position: absolute;
            right: 50px;
            z-index: 10;
            transition-delay: 0.5s;
        }
        img {
            position: absolute;
            top: 50%;
            #{$left}: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            max-height: 500px;
            max-width: 100%;
            &.previous-image {
                visibility: hidden;
            }
            &.current-image {
                visibility: visible;
            }
        }
    }
    .d-loading {
        margin-top: 0 !important;
    }
}
@media (max-width: 767px) {
    .product-gallery-degree .product-degree-images:after {
        bottom: 20%;
        height: 35%;
        left: 5%;
        right: 5%;
    }
}

// 3. Navigation
.product-gallery-degree .nav_bar {
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5rem;
    z-index: 11;
    padding: 0 1.5rem;
    border-radius: 3rem;
    background: rgba(255,255,255,.5);
    a {
        margin: 0 1rem;
        font-size: 0;
        text-align: center;
        color: var(--alpha-change-color-dark-1);

        &:hover {
            color: var(--alpha-change-color-dark-2);
        }

        &:before {
            font-family: $theme-font;
            font-size: 3rem;
        }
    }
    > :nth-child(2):before {
        content: "\f144";
        font-family: 'Font Awesome 5 Free';
        font-size: 4rem;
    }
    .nav_bar_stop:before {
        content: "\f28b";
    }
    .nav_bar_previous:before {
        content: "\e926";
    }
    .nav_bar_next:before {
        content: "\e928";
    }
}
