/* stylelint-disable */

.lg-outer {
    // reset transition duration
    &.lg-css3.lg-zoom-dragging {
        .lg-item.lg-complete.lg-zoomable {
            .lg-img-wrap, .lg-image {
                transition-duration: 0;
            }
        }
    }
    &.lg-use-transition-for-zoom {
        .lg-item.lg-complete.lg-zoomable {
            .lg-img-wrap {
                transition: transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s;
            }
        }
    }
    &.lg-use-left-for-zoom {
        .lg-item.lg-complete.lg-zoomable {
            .lg-img-wrap {
                transition: left $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, top $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s;
            }
        }
    }

    .lg-item.lg-complete.lg-zoomable{

        .lg-img-wrap {
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
        }

        .lg-image {
            // Translate required for zoom
            transform: scale3d(1, 1, 1);
            transition: transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
            transform-origin: 0 0;
            backface-visibility: hidden;
        }
    }

}

// zoom buttons
#lg-zoom-in {
    &:after {
        content: "\e311";
    }
}

#lg-actual-size {
    font-size: 20px;
    &:after {
        content: "\e033";
    }
}

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

    &:after {
        content: "\e312";
    }

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