{"version":3,"file":"common/css/lazy-load.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;EAAA;AAeI;EACI;AARR;AAUQ;EAEI;EACA;AATZ;AAWY;EACI;EACA;EACA;EACA;AAThB;AAaY;EACI;EACA;EACA;EACA;EACA;AAXhB;AAgBI;EACI;AAdR;AAiBQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfZ;AAqCI;EAEI;EACA;EACA;AApCR;;AAyCA;EACI;AAtCJ;AA4CI;EACI;AA1CR;AA8CI;EACI;AA5CR;AA+CI;EACI;EACA;EACA;AA7CR;AA+CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7CZ;;AAmDA;EACI;EACA;EAMA;EACA;AArDJ;AAwDI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;EACA;EACA;AA3DR;;AAgEA;EACI;AA7DJ;;AAgEA;EACI;AA7DJ;;AAiEA;EACI;EACA;AA9DJ;AAgEI;EACI;AA9DR;;AAmEA;EACI;EACA;AAhEJ;AAkEI;EACI;AAhER;;AAsEI;EACI;AAnER;AAqEQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnEZ;;AAyEA;EAEQ;IACI;IACA;IACA;EAvEV;EA2EE;IAEI;EA1EN;AACF;AA8EA;EACI;;;;IAII;IACA;EA5EN;EA+EE;IACI;EA7EN;EAgFE;IACI;EA9EN;AACF;AAkFA;EACI;IACI;EAhFN;EAmFE;IACI;IACA;EAjFN;AACF;AAqFA;EACI;IAAK;EAlFP;EAmFE;IAAO;EAhFT;AACF;AAkFA;EACI;IACI;EAhFN;EAkFE;IACI;EAhFN;AACF;AAmFA;EACI;IACI;IACA;EAjFN;EAmFE;IACI;IACA;EAjFN;AACF;AAqFA;EACI;IACI;EAnFN;EAqFE;IACI;EAnFN;AACF;AAsFA;EACI;AApFJ;;AAwFA;EACI,mBAnSU;EAoSV;EACA;EACA;AArFJ;AAuFI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;AA1FR;;AA8FA;EACI;IACI;EA3FN;EA6FE;IACI;EA3FN;AACF;AA+FA;EACI;;;;IAII;IACA;IACA;IACA;IACA;EA7FN;AACF;AAkGI;EACI;AAhGR;AAkGQ;EACI;AAhGZ;AAmGQ;EACI;AAjGZ;AAoGQ;EACI;AAlGZ;;AA2GA;AAMA;AAKA;EACI;AAjHJ;;AAoHA;AAMA;EACI;AAtHJ;;AAyHA;AAGI;EACI;EACA;EACA;EACA;EACA;AAxHR;AA2HI;EACI;EACA;EACA;EACA;EACA;AAzHR;;AA8HA;AACA;EACI;AA3HJ;AA+HQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7HZ;AAmIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjIZ;AAsJQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApJZ;AA0JQ;EACI;AAxJZ;;AA6JA;AAGQ;EACI;AA5JZ;AA+JQ;EACI;AA7JZ,C","sources":["webpack://@codecanel/before-after-image-slider/./src/common/styles/lazy-load.scss"],"sourcesContent":["/**\n * BAIS Lazy Load Styles\n * \n * CSS for lazy loading effects and animations\n */\n\n// Variables\n$lazy-load-duration: 300ms;\n$shimmer-duration: 1.5s;\n$skeleton-bg: #f6f7f8;\n$skeleton-highlight: #eee;\n\n// Lazy loading container states  \n.coca-bais-container {\n    // Prevent height collapse during slider initialization\n    &:not(.coca-image-compare-container) {\n        position: relative;\n        \n        img {\n            // Ensure images maintain their dimensions during loading\n            max-width: 100%;\n            height: auto;\n            \n            &:first-child {\n                display: block !important;\n                opacity: 1 !important;\n                position: relative;\n                z-index: 1;\n            }\n            \n            // Keep second image hidden but don't let it affect height calculation\n            &:not(:first-child) {\n                position: absolute;\n                top: 0;\n                left: 0;\n                opacity: 0;\n                pointer-events: none;\n            }\n        }\n    }\n\n    &.coca-bais-loading {\n        position: relative;\n        \n        // Show loading overlay\n        &::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(246, 247, 248, 0.9);\n            z-index: 10;\n            pointer-events: none;\n            opacity: 1;\n            transition: opacity $lazy-load-duration ease-out;\n        }\n        \n        // Show loading spinner\n        // &::after {\n        //     content: '';\n        //     position: absolute;\n        //     top: 50%;\n        //     left: 50%;\n        //     width: 40px;\n        //     height: 40px;\n        //     margin: -20px 0 0 -20px;\n        //     border: 3px solid #f3f3f3;\n        //     border-top: 3px solid #3498db;\n        //     border-radius: 50%;\n        //     z-index: 11;\n        //     animation: bais-spin 1s linear infinite;\n        //     display: block; // Make spinner visible\n        // }\n    }\n    \n    // Remove loading overlay when loaded\n    &:not(.coca-bais-loading)::before,\n    &:not(.coca-bais-loading)::after {\n        opacity: 0;\n        pointer-events: none;\n        display: none;\n    }\n}\n\n// Lazy image states\n.coca-bais-lazy {\n    transition: opacity $lazy-load-duration ease-in-out;\n    \n    // &.coca-bais-lazy-loading {\n    //     opacity: 0.7;\n    // }\n    \n    &.coca-bais-lazy-loaded {\n        opacity: 1 !important;\n    }\n    \n    // Default state - ensure images are visible if lazy loading fails\n    &:not(.coca-bais-lazy-loading):not(.coca-bais-lazy-loaded):not(.coca-bais-lazy-error) {\n        opacity: 1 !important;\n    }\n    \n    &.coca-bais-lazy-error {\n        opacity: 0.5;\n        filter: grayscale(100%);\n        position: relative;\n        \n        &::after {\n            content: '⚠';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            font-size: 24px;\n            color: #e74c3c;\n            background: rgba(255, 255, 255, 0.9);\n            width: 40px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 50%;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        }\n    }\n}\n\n// Shimmer loading effect\n.coca-bais-shimmer {\n    position: relative;\n    background: linear-gradient(\n        90deg,\n        $skeleton-bg 0%,\n        $skeleton-highlight 50%,\n        $skeleton-bg 100%\n    );\n    background-size: 200% 100%;\n    animation: bais-shimmer $shimmer-duration ease-in-out infinite;\n    \n    // Override image display during shimmer\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: linear-gradient(\n            90deg,\n            rgba(246, 247, 248, 0.8) 0%,\n            rgba(238, 238, 238, 0.8) 50%,\n            rgba(246, 247, 248, 0.8) 100%\n        );\n        background-size: 200% 100%;\n        animation: bais-shimmer $shimmer-duration ease-in-out infinite;\n        z-index: 2;\n        display: block;\n    }\n}\n\n// Fade transition variants\n.coca-bais-lazy-fade-slow {\n    transition-duration: 600ms;\n}\n\n.coca-bais-lazy-fade-fast {\n    transition-duration: 150ms;\n}\n\n// Blur-to-sharp effect\n.coca-bais-lazy-blur {\n    filter: blur(5px);\n    transition: filter $lazy-load-duration ease-out, opacity $lazy-load-duration ease-out;\n    \n    &.coca-bais-lazy-loaded {\n        filter: blur(0);\n    }\n}\n\n// Scale effect\n.coca-bais-lazy-scale {\n    transform: scale(1.05);\n    transition: transform $lazy-load-duration ease-out, opacity $lazy-load-duration ease-out;\n    \n    &.coca-bais-lazy-loaded {\n        transform: scale(1);\n    }\n}\n\n// Progressive loading states\n.coca-bais-progressive-loading {\n    .coca-bais-lazy-after {\n        opacity: 0.3;\n        \n        &::before {\n            content: 'Loading...';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: rgba(0, 0, 0, 0.7);\n            color: white;\n            padding: 5px 10px;\n            border-radius: 3px;\n            font-size: 12px;\n            z-index: 5;\n        }\n    }\n}\n\n// Responsive optimizations\n@media (max-width: 768px) {\n    .coca-bais-container.coca-bais-loading {\n        &::after {\n            width: 30px;\n            height: 30px;\n            margin: -15px 0 0 -15px;\n        }\n    }\n    \n    .coca-bais-lazy {\n        // Faster transitions on mobile\n        transition-duration: 200ms;\n    }\n}\n\n// Reduced motion accessibility\n@media (prefers-reduced-motion: reduce) {\n    .coca-bais-lazy,\n    .coca-bais-container.coca-bais-loading::before,\n    .coca-bais-container.coca-bais-loading::after,\n    .coca-bais-shimmer {\n        transition: none;\n        animation: none;\n    }\n    \n    .coca-bais-lazy-blur {\n        filter: none;\n    }\n    \n    .coca-bais-lazy-scale {\n        transform: none;\n    }\n}\n\n// High contrast mode\n@media (prefers-contrast: high) {\n    .coca-bais-container.coca-bais-loading::before {\n        background: rgba(255, 255, 255, 0.95);\n    }\n    \n    .coca-bais-lazy-error::after {\n        background: white;\n        border: 2px solid #e74c3c;\n    }\n}\n\n// Animations\n@keyframes bais-spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n@keyframes bais-shimmer {\n    0% {\n        background-position: -200% 0;\n    }\n    100% {\n        background-position: 200% 0;\n    }\n}\n\n@keyframes bais-fade-in {\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n// Pulse animation for loading state\n@keyframes bais-pulse {\n    0%, 100% {\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n}\n\n.coca-bais-pulse {\n    animation: bais-pulse 2s ease-in-out infinite;\n}\n\n// Skeleton placeholder styles\n.coca-bais-skeleton {\n    background: $skeleton-bg;\n    border-radius: 4px;\n    position: relative;\n    overflow: hidden;\n    \n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: linear-gradient(\n            90deg,\n            transparent,\n            rgba(255, 255, 255, 0.6),\n            transparent\n        );\n        animation: bais-skeleton-loading 1.5s ease-in-out infinite;\n    }\n}\n\n@keyframes bais-skeleton-loading {\n    0% {\n        transform: translateX(-100%);\n    }\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n// Print styles - show all images\n@media print {\n    .coca-bais-lazy,\n    .coca-bais-shimmer,\n    .coca-bais-container.coca-bais-loading::before,\n    .coca-bais-container.coca-bais-loading::after {\n        opacity: 1 !important;\n        animation: none !important;\n        transition: none !important;\n        filter: none !important;\n        transform: none !important;\n    }\n}\n\n// Debug mode (add .coca-bais-debug to container)\n.coca-bais-debug {\n    .coca-bais-lazy {\n        border: 2px solid;\n        \n        &.coca-bais-lazy-loading {\n            border-color: orange;\n        }\n        \n        &.coca-bais-lazy-loaded {\n            border-color: green;\n        }\n        \n        &.coca-bais-lazy-error {\n            border-color: red;\n        }\n    }\n}\n// .coca-image-compare-before {\n//  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 120 120' fill='none'%3E%3Crect width='120' height='120' fill='%23EFF1F3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z' fill='%23687787'/%3E%3C/svg%3E\");\n//   background-repeat: no-repeat;\n//   background-position: left;\n// }\n/* Blur effect for before iframe */\n// .coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-blur {\n//     background: rgba(240, 240, 240, 0.8);\n//     backdrop-filter: blur(5px);\n// }\n\n/* Color effect for before iframe */\n// .coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-color {\n//     background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==\");\n//     background-repeat: repeat;\n// }\n.coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-color {\n    background-color: #f0f0f0;\n}\n\n/* Similar for after iframe */\n// .coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-blur {\n//     background: rgba(240, 240, 240, 0.8);\n//     backdrop-filter: blur(5px);\n// }\n\n.coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-color {\n    background-color: #f0f0f0;\n}\n\n/* Skeleton effect for iframes */\n.coca-video-compare-wrapper {\n\n    .coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-skeleton {\n        background: #f0f0f0;\n        background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 9V15C19 17.2091 17.2091 19 15 19H9C6.79086 19 5 17.2091 5 15V9C5 6.79086 6.79086 5 9 5H15C17.2091 5 19 6.79086 19 9Z' stroke='%23c0c0c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4 12.117L13.3 13.549C13.4244 13.6373 13.4983 13.7804 13.4983 13.933C13.4983 14.0855 13.4244 14.2286 13.3 14.317L11.4 15.883C11.2396 16.0081 11.0239 16.0363 10.8367 15.9564C10.6496 15.8766 10.5206 15.7014 10.5 15.499V12.499C10.5213 12.2969 10.6505 12.1223 10.8375 12.043C11.0245 11.9636 11.2399 11.9919 11.4 12.117V12.117Z' stroke='%23c0c0c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 9.75C19.4142 9.75 19.75 9.41421 19.75 9C19.75 8.58579 19.4142 8.25 19 8.25V9.75ZM12 8.25C11.5858 8.25 11.25 8.58579 11.25 9C11.25 9.41421 11.5858 9.75 12 9.75V8.25ZM5 8.25C4.58579 8.25 4.25 8.58579 4.25 9C4.25 9.41421 4.58579 9.75 5 9.75V8.25ZM12 9.75C12.4142 9.75 12.75 9.41421 12.75 9C12.75 8.58579 12.4142 8.25 12 8.25V9.75ZM11.25 9C11.25 9.41421 11.5858 9.75 12 9.75C12.4142 9.75 12.75 9.41421 12.75 9H11.25ZM12.75 5C12.75 4.58579 12.4142 4.25 12 4.25C11.5858 4.25 11.25 4.58579 11.25 5H12.75ZM19 8.25H12V9.75H19V8.25ZM5 9.75H12V8.25H5V9.75ZM12.75 9V5H11.25V9H12.75Z' fill='%23c0c0c0'/%3E%3C/svg%3E\");\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: 100px 100px;\n    }\n\n    .coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-skeleton {\n        background: #f0f0f0;\n        background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 9V15C19 17.2091 17.2091 19 15 19H9C6.79086 19 5 17.2091 5 15V9C5 6.79086 6.79086 5 9 5H15C17.2091 5 19 6.79086 19 9Z' stroke='%23c0c0c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4 12.117L13.3 13.549C13.4244 13.6373 13.4983 13.7804 13.4983 13.933C13.4983 14.0855 13.4244 14.2286 13.3 14.317L11.4 15.883C11.2396 16.0081 11.0239 16.0363 10.8367 15.9564C10.6496 15.8766 10.5206 15.7014 10.5 15.499V12.499C10.5213 12.2969 10.6505 12.1223 10.8375 12.043C11.0245 11.9636 11.2399 11.9919 11.4 12.117V12.117Z' stroke='%23c0c0c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 9.75C19.4142 9.75 19.75 9.41421 19.75 9C19.75 8.58579 19.4142 8.25 19 8.25V9.75ZM12 8.25C11.5858 8.25 11.25 8.58579 11.25 9C11.25 9.41421 11.5858 9.75 12 9.75V8.25ZM5 8.25C4.58579 8.25 4.25 8.58579 4.25 9C4.25 9.41421 4.58579 9.75 5 9.75V8.25ZM12 9.75C12.4142 9.75 12.75 9.41421 12.75 9C12.75 8.58579 12.4142 8.25 12 8.25V9.75ZM11.25 9C11.25 9.41421 11.5858 9.75 12 9.75C12.4142 9.75 12.75 9.41421 12.75 9H11.25ZM12.75 5C12.75 4.58579 12.4142 4.25 12 4.25C11.5858 4.25 11.25 4.58579 11.25 5H12.75ZM19 8.25H12V9.75H19V8.25ZM5 9.75H12V8.25H5V9.75ZM12.75 9V5H11.25V9H12.75Z' fill='%23c0c0c0'/%3E%3C/svg%3E\");\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: 100px 100px;\n    }\n\n}\n\n/* Triple slider background skeleton - show on parent container when images are lazy loading */\n.coca-bais-triple-container {\n    position: relative;\n    \n    // Show skeleton background when any image inside is lazy loading\n    &:has(.coca-bais-lazy-loading.coca-bais-placeholder-skeleton) {\n        &::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: #EFF1F3;\n            background-image: url(\"data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23EFF1F3' height='120' width='120' /%3E%3Cpath clip-rule='evenodd' d='M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z' fill='%23687787' fill-rule='evenodd' /%3E%3C/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: center center;\n            background-size: 120px 120px;\n            z-index: 0;\n            pointer-events: none;\n        }\n    }\n\n    // Show color background if select color placeholder\n    &:has(.coca-bais-lazy-loading.coca-bais-placeholder-color) {\n        &::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: #f0f0f0;\n            z-index: 0;\n            pointer-events: none;\n        }\n    }\n\n    // Show blur background if select blur placeholder\n    // &:has(.coca-bais-lazy-loading.coca-bais-placeholder-blur) {\n    //     &::before {\n    //         content: '';\n    //         position: absolute;\n    //         top: 0;\n    //         left: 0;\n    //         right: 0;\n    //         bottom: 0;\n    //         background: #f0f0f0;\n    //         z-index: 0;\n    //         pointer-events: none;\n    //     }\n    // }\n    \n    // Fallback for browsers that don't support :has() - use class-based detection\n    &.coca-bais-loading-skeleton {\n        &::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: #EFF1F3;\n            background-image: url(\"data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23EFF1F3' height='120' width='120' /%3E%3Cpath clip-rule='evenodd' d='M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z' fill='%23687787' fill-rule='evenodd' /%3E%3C/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: center center;\n            background-size: 120px 120px;\n            z-index: 0;\n            pointer-events: none;\n        }\n    }\n    \n    // Hide skeleton background when images are loaded\n    &:not(:has(.coca-bais-lazy-loading)):not(.coca-bais-loading-skeleton) {\n        &::before {\n            display: none;\n        }\n    }\n}\n\n/* Horizontal slider positioning - adjust for split view */\n.coca-image-compare-horizontal {\n    .coca-video-compare-wrapper {\n        .coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-skeleton {\n            background-position: 25% center; /* Position in left area */\n        }\n        \n        .coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-skeleton {\n            background-position: 75% center; /* Position in right area */\n        }\n    }\n}"],"names":[],"sourceRoot":""}