@use '../lg-mixins' as *;

.lg-css3 {
    &.lg-soft-zoom {
        .lg-item {
            // The crossfade IS the effect here, so it runs for the
            // whole slide instead of the short default swap. Declared on
            // the item: --lg-speed is published on .lg-inner, so only its
            // descendants can resolve it.
            --lg-opacity-speed: var(--lg-speed, 400ms);

            opacity: 0;

            &.lg-prev-slide {
                @include scale3d(1.1, 1.1, 1.1);
            }

            &.lg-next-slide {
                @include scale3d(0.9, 0.9, 0.9);
            }

            &.lg-current {
                @include scale3d(1, 1, 1);
                opacity: 1;
            }

            &.lg-prev-slide,
            &.lg-next-slide,
            &.lg-current {
                @include transitionCustom(
                    transform 1s cubic-bezier(0, 0, 0.25, 1) 0s,
                    opacity 1s ease 0s
                );
            }
        }
    }
}