// Carousel
.carousel {
    background-color: $color-primary;

    .wrap {
        max-width: 1280px;
        padding: 0;

        @include breakpoint (1600px) {
            max-width: 1424px;
        }
    }


    /*
    ** Gallery
    */
    .gallery {
        position: relative;
        z-index: 2;
        margin: 0 auto;

        @include breakpoint (sm) {
            max-width: 85%;
        }
        @include breakpoint (xl) {
            max-width: 100%;
        }

        // Variables
        $scale: 0.9;
        $angle: 1deg;
        $angleHover: 1.25deg;
        $distance: 9%;
        $distanceHover: 10%;
        $radius: 8px;

        // Images
        &__images {
            position: relative;
            height: 0;
            padding-bottom: calc(100% / 1.5); // Ratio 3.2
            user-select: none;

            // Photo
            &--photo {
                $duration: 0.9s;

                opacity: 0;
                overflow: hidden;
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: scale($scale);
                box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
                transition: transform $duration $ease-quart, opacity $duration $ease-quart;
                will-change: transform, opacity;

                @include breakpoint (sm) {
                    border-radius: $radius;
                }

                img {
                    opacity: 0;
                    position: relative;
                    z-index: 1;
                    display: block;
                    width: 100%;
                    height: auto;
                }

                // Overlay
                &:before {
                    opacity: 0;
                    content: "";
                    display: block;
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: $color-primary;
                }
            }

            // Active photo
            .active {
                opacity: 1;
                z-index: 10;
                transform: scale(1);

                img {
                    opacity: 1;
                }
            }

            // Previous & next photo
            .prev, .next {
                opacity: 1;

                img {
                    opacity: 1;
                }

                &:before {
                    opacity: 0.4;
                }
            }

            // Previous photo
            .prev {
                z-index: 8;

                @include breakpoint (sm) {
                    transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
                }

                // Hover
                &.hover {
                    transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
                }
            }

            // Next photo
            .next {
                z-index: 9;

                @include breakpoint (sm) {
                    transform: translate($distance, -1%) rotate($angle) scale($scale);
                }

                // Hover
                &.hover {
                    transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
                }
            }
        }
    }


    /*
    ** Controls (arrows)
    */
    &__controls {
        display: none;

        @include breakpoint (sm) {
            position: absolute;
            z-index: 11;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
        }

        // Hover and clicking area
        &--area {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 12%;
            height: 100%;
            cursor: pointer;

            &.prev {
                margin-left: -6%;
            }
            &.next {
                margin-right: -6%;
            }
        }

        button {
            box-shadow: 0 2px 20px rgba(#000, 0.15);
        }
    }


    /*
    ** Information
    */
    &__infos {
        position: relative;
        z-index: 3;

        // Locations
        &--locations {
            position: relative;
            overflow: hidden;
            min-height: 128px;
        }

        // Location
        &--location {
            $distance: 40%;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            text-align: center;
            transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
            will-change: transform, opacity;
            margin-top: 32px;

            @include breakpoint (sm) {
                margin-top: pxVW(80);
            }
            @include breakpoint (xl) {
                margin-top: 72px;
            }

            &.prev {
                transform: translateY(-$distance);
            }
            &.active {
                transform: translateY(0);
                opacity: 1;
            }
            &.next {
                transform: translateY($distance);
            }

            // State
            .state {
                margin-top: 6px;
            }
        }
    }


    /*
    ** Dots for slider (mobile)
    */
    &__dots {
        display: none;

        @include breakpoint (xs) {
            display: flex;
            justify-content: center;
            margin-top: 32px;

            li {
                display: block;
                padding: 4px;
                cursor: pointer;

                &.active button {
                    background-color: $color-secondary;
                    transform: scale(1.25);
                    will-change: scale, background-color;
                }

                &:hover:not(.active) {
                    button {
                        background-color: lighten($color-lightpurple, 10);
                    }
                }
            }

            button {
                display: block;
                width: 8px;
                height: 8px;
                padding: 0;
                background-color: $color-lightpurple;
                border-radius: 50vh;
                text-decoration: none;
                transition: all 600ms $ease-quart;
            }
        }
    }
}


/*
** Zoomer
*/
.zoomer {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 101;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    &.show {
        opacity: 1;
        pointer-events: auto;
    }

    // Image
    &__image {
        width: 100%;
        height: 100%;
        overflow: auto;

        img {
            display: block;
            height: 100%;
            width: auto;
        }
    }

    // Button
    .button-control {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
    }
}
