@use 'lg-variables' as *;
@use 'lg-mixins' as *;

// The actual-size button carries both zoom icons; its live class
// (toggled by the plugin as the zoom state changes) picks one. The
// dedicated zoom-in/out buttons carry a single icon each, so these
// rules are inert on them.
.lg-icon-custom.lg-zoom-in .lg-ci-zoom-out {
    display: none;
}
.lg-icon-custom.lg-zoom-out .lg-ci-zoom-in {
    display: none;
}

.lg-outer {
    // reset transition duration
    &.lg-css3.lg-zoom-dragging {
        .lg-item.lg-complete.lg-zoomable {
            .lg-img-wrap,
            .lg-image {
                @include transition-duration(0ms !important);
            }
        }
    }
    &.lg-use-transition-for-zoom {
        .lg-item.lg-complete.lg-zoomable {
            .lg-img-wrap {
                will-change: transform;
                @include transitionCustom(
                    transform $zoom-transition-duration
                        cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s
                );
            }
        }
        &.lg-zoom-drag-transition {
            .lg-item.lg-complete.lg-zoomable {
                .lg-img-wrap {
                    will-change: transform;
                    @include transitionCustom(
                        transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s
                    );
                }
            }
        }
        // Gesture releases settle the image scale on the same monotonic
        // ease as the wrap pan. The default bouncy bezier below overshoots
        // by ~19% of the delta, fine for one-step button zooms, a violent
        // excursion when an infinite-zoom pinch releases far above actual
        // size. Both :not() guards keep this high-specificity rule from
        // outranking the two !important kill switches it must lose to:
        // lg-zoom-dragging (fingers still down) and no-transition (the
        // actual-size natural-px swap, which must never animate).
        &.lg-zoom-drag-transition:not(.lg-zoom-dragging) {
            .lg-item.lg-complete.lg-zoomable {
                .lg-image:not(.no-transition),
                .lg-dummy-img:not(.no-transition) {
                    @include transitionCustom(
                        transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s,
                        opacity 0.15s !important
                    );
                }
            }
        }
    }

    // Close-while-zoomed: the core starts the zoom-from-origin shrink on
    // the slide item and resetZoom strips the pan/scale styles in the
    // same frame. The strip has to land instantly, animated through the
    // transitions above it composes with the slide shrink, and the image
    // never reaches the trigger rect before the close timeout hides the
    // gallery.
    &.lg-closing {
        .lg-item.lg-complete.lg-zoomable {
            .lg-img-wrap,
            .lg-image,
            .lg-dummy-img {
                transition: none !important;
            }
        }
    }

    .lg-item.lg-complete.lg-zoomable {
        .lg-img-wrap {
            @include translate3d(0, 0, 0);
            @include backface-visibility(hidden);
        }

        .lg-image,
        .lg-dummy-img {
            // Translate required for zoom
            @include scale3d(1, 1, 1);
            @include transitionCustom(
                transform $zoom-transition-duration
                    cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s,
                opacity 0.15s !important
            );
            @include backface-visibility(hidden);

            &.no-transition {
                transition: none !important;
            }
            &.reset-transition {
                transform: scale3d(1, 1, 1) translate3d(-50%, -50%, 0px) !important;
                max-width: none !important;
                max-height: none !important;
                top: 50% !important;
                left: 50% !important;
            }
            &.reset-transition-x {
                transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0px) !important;
                top: 0 !important;
                left: 50% !important;
                max-width: none !important;
                max-height: none !important;
            }
            &.reset-transition-y {
                transform: scale3d(1, 1, 1) translate3d(0, -50%, 0px) !important;
                top: 50% !important;
                left: 0% !important;
                max-width: none !important;
                max-height: none !important;
            }
        }
    }
}

.lg-icon {
    // zoom buttons
    &.lg-zoom-in {
        .lg-actual-size & {
            opacity: 1;
            pointer-events: auto;
        }
    }

    &.lg-zoom-out {
        opacity: 0.5;
        pointer-events: none;

        .lg-zoomed & {
            opacity: 1;
            pointer-events: auto;
        }
    }
}
.lg-outer {
    &[data-lg-slide-type='video'],
    &[data-lg-slide-type='iframe'],
    &.lg-first-slide-loading {
        .lg-zoom-in,
        .lg-actual-size,
        .lg-zoom-out {
            opacity: $lg-toolbar-icon-disabled-opacity;
            pointer-events: none;
        }
    }
}