{"version":3,"file":"common/css/carousel.css","mappings":";;;AAAA;;;;;;;EAAA;AASA;AACA;EACC;EACA;EACA;AAAD;;AAGA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAD;;AAGA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAAD;;AAGA;AACA;EACC;EACA;EACA;EACA;AAAD;;AAGA;AACA;EACC;EACA;EACA;EACA;AAAD;;AAGA;AACA;EACC;AAAD;;AAEA;EACC;AACD;;AAEA;AACA;EACC;EACA;AACD;;AACA;EACC;EACA;EACA;AAED;;AACA;EACC;EACA;EACA;EACA;EACA;AAED;;AACA;AACA;EACC;AAED;;AACA;AACA;EACC;EACA;AAED;;AAAA;AACA;EACC;AAGD;;AADA;AACA;EACC;EACA;AAID;;AADA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAID;;AADA;AACA;;EAEC;AAID;;AADA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAID;;AADA;AACA;;;EAGC;AAID;;AADA;AACA;;EAEC;EACA;AAID;;AADA;AACA;;EAEC;EACA;EACA;EACA;EACA;EACA;AAID;;AADA;;EAEC;EACA;EACA;AAID;;AADA;AACA;EACC;AAID;;AADA;EACC;EACA;AAID;;AADA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAID;;AADA;AACA;EACC;IACC;IACA;EAIA;EADD;;IAEC;IACA;EAGA;AACF;AAAA;EACC;IACC;EAEA;EACD;;IAEC;IACA;IACA;EACA;AACF;AAEA;AACA;EACC;EACA;EACA;EACA;AAAD;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAAD;;AAGA;EACC;IACC;EAAA;AACF;AAGA;AACA;EACC;EACA;AADD;;AAIA;AACA;EACC;EACA;EACA;EACA;EACA;AADD;;AAIA;AACA;EACC;AADD;;AAIA;AACA;EACC;EACA;EACA;EACA;EACA;AADD;;AAIA;EACC;EACA;EACA;EACA;AADD;;AAIA;AACA;EACC;AADD;;AAIA;AACA;EACC;EACA;EACA;EACA;EACA;AADD,C","sources":["webpack://@codecanel/before-after-image-slider/./src/common/styles/carousel.scss"],"sourcesContent":["/**\n * Carousel Styles\n *\n * Styles for the before/after image slider carousel layout using Swiper v12 Web Components.\n *\n * @package wp-before-after-image-slider\n * @since 2.1.0\n */\n\n/* Carousel Wrapper */\n.bais-carousel-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\tmargin: 20px 0;\n}\n\n/* Swiper Web Component Container */\nswiper-container.bais-carousel {\n\twidth: 100%;\n\toverflow: hidden;\n\tpadding-bottom: 40px; /* Space for pagination */\n\t/* CSS Custom Properties for Swiper Styling (passed through shadow DOM) */\n\t--swiper-navigation-color: #2271b1;\n\t--swiper-navigation-size: 20px;\n\t--swiper-pagination-color: #2271b1;\n\t--swiper-pagination-bullet-size: 12px;\n\t--swiper-pagination-bullet-inactive-color: #c3c4c7;\n\t--swiper-pagination-bullet-inactive-opacity: 1;\n\t--swiper-pagination-bullet-horizontal-gap: 6px;\n\t--swiper-theme-color: #2271b1;\n}\n\n/* Carousel Slide */\nswiper-slide .bais-carousel-slide {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-sizing: border-box;\n}\n\n/* Force sliders to take proper dimensions inside carousel */\nswiper-slide .bais-carousel-slide .coca-bais-shortcode {\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\tdisplay: flex !important;\n\tjustify-content: center !important;\n}\n\n/* Force slider containers to take proper dimensions */\nswiper-slide .bais-carousel-slide .coca-bais-container {\n\tmax-width: fit-content;\n\tposition: relative !important;\n\toverflow: hidden !important;\n\tmargin: 0 auto !important;\n}\n\n/* When carousel has fixed dimensions, respect them */\nswiper-slide .bais-carousel-slide .coca-bais-container[data-carousel-fixed=\"true\"] {\n\t/* Dimensions set via inline style - don't override */\n}\nswiper-slide .bais-carousel-slide .coca-bais-caption-wrapper {\n\tmargin: 0 auto !important;\n}\n\n/* Only use auto dimensions when not carousel-fixed */\nswiper-slide .bais-carousel-slide .coca-bais-container:not([data-carousel-fixed=\"true\"]) {\n\twidth: auto;\n\theight: auto;\n}\nswiper-slide .bais-carousel-slide .coca-bais-container[id^=\"video-slider-\"] {\n\theight: 360px !important;\n\tmin-height: auto !important;\n\taspect-ratio: initial !important;\n}\n\nswiper-slide .bais-carousel-slide .coca-bais-triple-container {\n\tmax-width: none !important;\n\theight: auto !important;\n\tposition: relative !important;\n\toverflow: visible !important;\n\tmargin: 0 auto !important;\n}\n\n/* Let triple slider images calculate naturally - don't force dimensions */\nswiper-slide .bais-carousel-slide .coca-bais-triple-container .coca-bais-image {\n\t/* No dimension constraints - let triple slider plugin handle sizing */\n}\n\n/* Default slider images - respect inline styles when set */\nswiper-slide .bais-carousel-slide .coca-bais-container .coca-bais-image {\n\tmax-width: 100%;\n\tdisplay: block !important;\n}\n/* when lazy loading, skeleton image height will be 100% of container height, so ensure it doesn't exceed natural image height */\nswiper-slide .bais-carousel-slide .coca-bais-container .coca-bais-image.coca-bais-lazy-loading {\n\theight: 100%;\n}\n/* Only use auto dimensions for images when container isn't fixed */\nswiper-slide .bais-carousel-slide .coca-bais-container:not([data-carousel-fixed=\"true\"]) .coca-bais-image {\n\twidth: auto;\n\theight: auto;\n}\n\n/* Fix overlay to match container size */\nswiper-slide .bais-carousel-slide .coca-image-compare-overlay {\n\tposition: absolute !important;\n\ttop: 0 !important;\n\tleft: 0 !important;\n\tright: 0 !important;\n\tbottom: 0 !important;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tmax-width: none !important;\n\tpointer-events: none !important;\n}\n\n/* Ensure overlay labels can receive pointer events */\nswiper-slide .bais-carousel-slide .coca-image-compare-before-label,\nswiper-slide .bais-carousel-slide .coca-image-compare-after-label {\n\tpointer-events: auto !important;\n}\n\n/* Fix triple slider overlay */\nswiper-slide .bais-carousel-slide .coca-bais-triple-container .overlay {\n\tposition: absolute !important;\n\ttop: 0 !important;\n\tleft: 0 !important;\n\tright: 0 !important;\n\tbottom: 0 !important;\n\twidth: 100% !important;\n\theight: 100% !important;\n}\n\n/* Ensure labels stay inside container */\nswiper-slide .bais-carousel-slide .coca-image-compare-before-label,\nswiper-slide .bais-carousel-slide .coca-image-compare-after-label,\nswiper-slide .bais-carousel-slide .label {\n\tposition: absolute !important;\n}\n\n/* Ensure sliders fit within carousel slides */\nswiper-slide .bais-carousel-slide .image-compare,\nswiper-slide .bais-carousel-slide .image-compare-triple {\n\tmax-width: 100%;\n\tmargin: 0 auto;\n}\n\n/* Custom Navigation Button Styling */\nswiper-container.bais-carousel::part(button-next),\nswiper-container.bais-carousel::part(button-prev) {\n\tbackground: rgba(255, 255, 255, 0.9);\n\twidth: 44px;\n\theight: 44px;\n\tborder-radius: 50%;\n\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n\ttransition: all 0.3s ease;\n}\n\nswiper-container.bais-carousel::part(button-next):hover,\nswiper-container.bais-carousel::part(button-prev):hover {\n\tbackground: #2271b1;\n\tcolor: #fff;\n\tbox-shadow: 0 4px 12px rgba(34, 113, 177, 0.3);\n}\n\n/* Pagination Custom Styling */\nswiper-container.bais-carousel::part(bullet) {\n\ttransition: all 0.3s ease;\n}\n\nswiper-container.bais-carousel::part(bullet-active) {\n\twidth: 24px;\n\tborder-radius: 6px;\n}\n\n/* Error Message */\n.bais-carousel-error {\n\tpadding: 20px;\n\tbackground: #fff8e5;\n\tborder: 1px solid #f0b849;\n\tborder-radius: 4px;\n\tcolor: #8a6d3b;\n\ttext-align: center;\n\tfont-size: 14px;\n\tmargin: 20px 0;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n\tswiper-container.bais-carousel {\n\t\t--swiper-navigation-size: 16px;\n\t\t--swiper-pagination-bullet-size: 10px;\n\t}\n\t\n\tswiper-container.bais-carousel::part(button-next),\n\tswiper-container.bais-carousel::part(button-prev) {\n\t\twidth: 36px;\n\t\theight: 36px;\n\t}\n}\n\n@media (max-width: 480px) {\n\tswiper-container.bais-carousel {\n\t\t--swiper-navigation-size: 14px;\n\t}\n\t\n\tswiper-container.bais-carousel::part(button-next),\n\tswiper-container.bais-carousel::part(button-prev) {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\topacity: 0.5;\n\t}\n}\n\n/* Loading State */\n.bais-carousel-wrapper.loading {\n\tmin-height: 400px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.bais-carousel-wrapper.loading::after {\n\tcontent: '';\n\twidth: 48px;\n\theight: 48px;\n\tborder: 4px solid #f0f0f1;\n\tborder-top-color: #2271b1;\n\tborder-radius: 50%;\n\tanimation: bais-spin 0.8s linear infinite;\n}\n\n@keyframes bais-spin {\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n/* Fix for video sliders in carousel */\nswiper-slide .bais-carousel-slide video {\n\tmax-width: 100%;\n\theight: auto;\n}\n\n/* Ensure swiper-slide elements display properly */\nswiper-slide {\n\theight: auto !important;\n\tmin-height: 200px;\n\tdisplay: flex !important;\n\talign-items: stretch !important;\n\tbox-sizing: border-box;\n}\n\n/* Additional spacing and layout */\n.bais-carousel-wrapper {\n\tpadding: 10px 0;\n}\n\n/* Ensure wrapper containers inside slides */\nswiper-slide .coca-image-compare-wrapper {\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\tjustify-content: center !important;\n\talign-items: center !important;\n\toverflow: hidden !important;\n}\n\nswiper-slide .coca-image-compare-triple-wrapper {\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\tdisplay: block !important;\n\toverflow: visible !important;\n}\n\n/* Triple slider container centers itself */\nswiper-slide .coca-bais-triple-container {\n\tmargin: 0 auto !important;\n}\n\n/* Ensure shortcode container provides sizing context */\nswiper-slide .coca-bais-shortcode .shortcode-container {\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\tjustify-content: center !important;\n\talign-items: center !important;\n\toverflow: visible !important;\n}\n"],"names":[],"sourceRoot":""}