/* Mobile swipe edge bleed styles for Kodlo Product Gallery. */

/* Expand the clipping area into the configured side gutter while dragging. */
.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] {
    --kodlo-mobile-side-gutter-negative: -30px;
    --kodlo-edge-bleed-reveal-duration: 200ms;
    --kodlo-edge-bleed-hide-duration: 200ms;
}

.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] .kodlo-mobile-slider,
.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] .kodlo-thumbs-slider {
    overflow: visible;
    clip-path: inset(0 0);
    -webkit-clip-path: inset(0 0);
    transition:
        clip-path var(--kodlo-edge-bleed-hide-duration) ease-out,
        -webkit-clip-path var(--kodlo-edge-bleed-hide-duration) ease-out;
}

.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] .kodlo-mobile-slider.kodlo-edge-bleed-active,
.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] .kodlo-thumbs-slider.kodlo-edge-bleed-active {
    clip-path: inset(0 var(--kodlo-mobile-side-gutter-negative));
    -webkit-clip-path: inset(0 var(--kodlo-mobile-side-gutter-negative));
    transition-duration: var(--kodlo-edge-bleed-reveal-duration);
}

/* Optionally anchor overlay arrows to the screen edge instead of the content edge. */
.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"][data-navigation-edge-nav="screen"] .kodlo-main-slider-wrap.kodlo-nav-overlay .kodlo-main-nav-prev {
    left: calc(var(--kodlo-nav-offset, 8px) + var(--kodlo-mobile-side-gutter-negative));
}

.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"][data-navigation-edge-nav="screen"] .kodlo-main-slider-wrap.kodlo-nav-overlay .kodlo-main-nav-next {
    right: calc(var(--kodlo-nav-offset, 8px) + var(--kodlo-mobile-side-gutter-negative));
}

.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"][data-navigation-edge-nav="screen"] .kodlo-thumbs-slider-wrap.kodlo-nav-overlay .kodlo-thumbs-nav-prev {
    left: calc(var(--kodlo-nav-offset, 8px) + var(--kodlo-mobile-side-gutter-negative));
}

.kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"][data-navigation-edge-nav="screen"] .kodlo-thumbs-slider-wrap.kodlo-nav-overlay .kodlo-thumbs-nav-next {
    right: calc(var(--kodlo-nav-offset, 8px) + var(--kodlo-mobile-side-gutter-negative));
}

@media (prefers-reduced-motion: reduce) {
    .kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] .kodlo-mobile-slider,
    .kodlo-gallery-wrapper[data-mobile-edge-bleed="yes"] .kodlo-thumbs-slider {
        transition-duration: 0ms;
    }
}