{"version":3,"file":"common/css/image-compare-triple.css","mappings":";;;AAIA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;EACA;EACA;EAeA;EAoDA;AAvED;AAMC;EACC;AAJF;AAME;EACC;EACA;EACA;EAGA;AAJH;AASC;EACC;EACA;EACA;EACA;EACA;EACA;AAPF;AASE;EAEC;IACC;EARF;EAWC;IACC;EATF;AACF;AAaG;EACC;AAXJ;AAeG;EACC;AAbJ;AAgBI;EACC;AAdL;AAqBG;EACC;AAnBJ;AAsBG;EACC;AApBJ;AAuBG;EACC;AArBJ;AA2BC;;;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AA1BF;AA4BE;;;EACC;EACA;EACA;AAxBH;AA2BE;;;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAxBH;AA+CC;EAEC;AA9CF;AAsDC;EACC;AApDF;AAsDE;EACC;AApDH;AAwDC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAtDF;AAwDE;EACC;EACA;EACA;EACA;AAtDH;AAwDG;EAEC;EACA;EACA;EACA;EACA;EACA;AAvDJ;AAyDI;EACC;AAvDL;AA0DI;EACC;AAxDL;AA4DG;EACC;EAEA;EACA;AA3DJ;AA6DI;;EAEC;AA3DL;AAiEC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;AAhEF;AAkEE;EACC;AAhEH;AAmEE;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlEH;AAqEE;EACC;AAnEH;AAsEE;EACC;AApEH;AAuEE;EACC;EACA;AArEH;AAyEE;EACC;AAvEH;AAyEG;EAEC;AAxEJ;AA4EE;EACC;AA1EH;AA4EG;EAEC;AA3EJ;AA+EE;EACC;EACA;EACA;AA7EH;AA+EG;;EAEC;EACA;EACA;AA7EJ;AAgFG;EACC;EACA;AA9EJ;AAiFG;EACC;EACA;AA/EJ;AAyFC;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;AAxFF;AA4FC;EACC;EACA;EACA;AA1FF;AA4FE;EACC;EACA;EACA;EACA;AA1FH;AA6FE;EAAwB;EAAU;EAAW;AAxF/C;AAyFE;EAAwB;EAAW;AArFrC;AAsFE;EAAwB;EAAW;EAAW;AAjFhD;AAkFE;EAAwB;EAAW;AA9ErC;AA+EE;EAAwB;EAAc;AA3ExC;AA4EE;EAAwB;EAAc;EAAW;AAvEnD;AAwEE;EAAwB;EAAc;AApExC;AAuEC;EACC;AArEF;AAwEC;EACC;AAtEF;;AAgFA;AAWG;;;;;;;;EACC;EACA;AAhFJ;;AAgGG;;;;;;;;EACC;EACA;EACA;AAtFJ;;AAsGG;;;;;;;;EACC;EACA;AA5FJ;;AAkGA;AAWG;;;;;;;;EACC;EACA;AAlGJ;;AAkHG;;;;;;;;EACC;EACA;EACA;AAxGJ;;AAwHG;;;;;;;;EACC;EACA;AA9GJ;;AAoHA;AAWG;;;;;;;;EACC;EACA;AApHJ;;AAoIG;;;;;;;;EACC;EACA;EACA;AA1HJ;;AA0IG;;;;;;;;EACC;EACA;AAhIJ,C","sources":["webpack://@codecanel/before-after-image-slider/./src/common/styles/image-compare-triple.scss"],"sourcesContent":["// Class Prefix\n$pluginPrefix: \"coca-image-compare\" !default;\n\n\n/* You can remove this page div in your website */\n.#{$pluginPrefix}-triple-wrapper {\n\t--coca-image-compare-handle-color: #fff;\n\t--coca-image-compare-handle-stroke: 3px;\n\t--coca-image-compare-handle-circle-width: 40px;\n\t--coca-image-compare-handle-circle-height: 40px;\n\t--coca-image-compare-handle-box-shadow: 3.5px 0 7px rgba(100, 100, 100, 0.2);\n\t--coca-image-compare-handle-triangle-color: var(--coca-image-compare-handle-color);\n\t--coca-image-compare-handle-triangle-size: 6px;\n\t--coca-image-compare-handle-triangle-position: 5px;\n\t--coca-image-compare-handle-radius: 1000px;\n\t--coca-image-compare-overlay-bg: rgba(0, 0, 0, 0.5);\n\t--coca-image-compare-overlay-label-color: #000;\n\t--coca-image-compare-overlay-label-bg: #d6d6d680;\n\t--coca-image-compare-overlay-label-height: 38px;\n\t--coca-image-compare-overlay-label-width: 50px;\n\t--coca-image-compare-overlay-label-padding: 20px;\n\t--coca-image-compare-overlay-label-font-size: 13px;\n\t--coca-image-compare-overlay-label-letter-spacing: 0.1em;\n\t--coca-image-compare-label-radius: 2px;\n\n\tdisplay: flex;\n\t//justify-content: center;\n\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t* {\n\t\tmargin: 0;\n\n\t\t&:not(.label) {\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-touch-callout: none;\n\t\t\t-webkit-user-select: none;\n\t\t\t-moz-user-select: none;\n\t\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\t\t}\n\t}\n\n\t/* Our coca-image-compare-container */\n\t.#{$pluginPrefix}-triple-container {\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tmax-height: 100vh;\n\t\toverflow: hidden;\n\t\ttransform: translate3d(0%, 0%, 0);\n\t\tanimation: fadeIn 800ms;\n\n\t\t@keyframes fadeIn {\n\n\t\t\t0% {\n\t\t\t\topacity: 0;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.label_hide {\n\t\t\t.label {\n\t\t\t\tdisplay: none !important;\n\t\t\t}\n\t\t}\n\t\t&.label_show_on_hover {\n\t\t\t.label {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\t.label {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t//.overlay,\n\t\t\t.label {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\t.overlay {\n\t\t\t\tbackground-color: var(--coca-image-compare-overlay-bg);\n\t\t\t}\n\n\t\t\t&:has(.scrolling) .overlay {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Our image information */\n\t.bottom,\n\t.middle,\n\t.top {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t\t// background-color: #fff;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: cover;\n\n\t\timg {\n\t\t\tmax-width: none;\n\t\t\theight: auto;\n\t\t\tobject-fit: contain;\n\t\t}\n\n\t\t.label {\n\t\t\tposition: absolute;\n\t\t\twidth: var(--coca-image-compare-overlay-label-width);\n\t\t\tmin-width: max-content;\n\t\t\tpadding: 0 var(--coca-image-compare-overlay-label-padding);\n\t\t\tfont-size: var(--coca-image-compare-overlay-label-font-size);\n\t\t\tline-height: var(--coca-image-compare-overlay-label-height);\n\t\t\tcolor: var(--coca-image-compare-overlay-label-color);\n\t\t\ttext-align: center;\n\t\t\tbackground: var(--coca-image-compare-overlay-label-bg);\n\t\t\tborder-radius: var(--coca-image-compare-label-radius);\n\t\t\topacity: 1;\n\t\t\t//display: none;\n\t\t\ttransition: 300ms ease-in-out;\n\t\t}\n\t}\n\n\t.bottom {\n\t\t//background: #E57C23;\n\n\t\t// .label {\n\t\t// \tright: 10px;\n\t\t// \tbottom: 10px;\n\t\t// }\n\t}\n\n\t.middle {\n\t\t//background: #E8AA42;\n\n\t\t// .label {\n\t\t// \tbottom: 10px;\n\t\t// \tleft: 56%;\n    \t// \ttransform: translateX(-50%);\n\t\t// }\n\t}\n\n\t.top {\n\t\t//background: #F8F1F1;\n\t\twidth: 125px;\n\n\t\t// .label {\n\t\t// \tbottom: 10px;\n\t\t// \tleft: 10px;\n\t\t// }\n\t}\n\n\t&.handle-bottom {\n\t\tpadding-bottom: 40px;\n\n\t\t.#{$pluginPrefix}-triple-container {\n\t\t\toverflow: visible;\n\t\t}\n\t}\n\n\t.triple-handle-wrapper {\n\t\tposition: absolute;\n\t\tbottom: -22px;\n\t\twidth: 100%;\n\t\theight: 10px;\n\t\tmargin-right: 0;\n\t\tbackground: rgba(0, 0, 0, .25);\n\t\tborder-radius: 30px;\n\n\t\t.scroller {\n\t\t\twidth: unset;\n\t\t\theight: unset;\n\t\t\tbackground: #fff;\n\t\t\tbox-shadow: none;\n\n\t\t\t&.scroller-top,\n\t\t\t&.scroller-middle {\n\t\t\t\t--coca-image-compare-handle-circle-height: 19px;\n\t\t\t\ttop: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin-top: 0;\n\t\t\t\tborder: 0;\n\t\t\t\ttransform: none;\n\n\t\t\t\t&:after {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t&:before {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.scroller__thumb {\n\t\t\t\theight: 10px;\n\t\t\t\t//width: 30px;\n\t\t\t\tborder: none !important;\n\t\t\t\tborder-radius: 5px;\n\n\t\t\t\t.left-arrow,\n\t\t\t\t.right-arrow {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.scroller {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 100px;\n\t\tz-index: 10;\n\t\tmargin-left: calc(-1 * var(--coca-image-compare-handle-stroke) + 3px);\n\t\tpointer-events: auto;\n\t\tcursor: pointer;\n\t\tborder: var(--coca-image-compare-handle-stroke) solid var(--coca-image-compare-handle-color);\n\t\tborder-radius: var(--coca-image-compare-handle-radius);\n\t\tbox-shadow: var(--coca-image-compare-handle-box-shadow);\n\t\t//background-color: var(--coca-image-compare-handle-color);\n\t\topacity: 0.9;\n\t\ttransition: 300ms ease-in-out;\n\t\ttransition-property: opacity, background-color, border-color !important;\n\t\ttransform: translateY(-50%);\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t&:before,\n\t\t&:after {\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tz-index: 30;\n\t\t\tdisplay: block;\n\t\t\twidth: 3px;\n\t\t\theight: 9999px;\n\t\t\tmargin-left: -1px;\n\t\t\tcontent: \" \";\n\t\t\tbox-shadow: 3.5px 0 7px rgba(100, 100, 100, 0.2);\n\t\t\ttransition: 100ms ease-in-out;\n\t\t}\n\n\t\t&:before {\n\t\t\ttop: calc(var(--coca-image-compare-handle-circle-height) + var(--coca-image-compare-handle-stroke));\n\t\t}\n\n\t\t&:after {\n\t\t\tbottom: calc(var(--coca-image-compare-handle-circle-height) + var(--coca-image-compare-handle-stroke));\n\t\t}\n\n\t\t&.scrolling {\n\t\t\tpointer-events: none;\n\t\t\topacity: 1;\n\t\t\t// z-index: 1;\n\t\t}\n\n\t\t&.scroller-middle {\n\t\t\ttop: calc(50% + calc(var(--coca-image-compare-handle-circle-height) / 2 + 25px));\n\n\t\t\t&:before,\n\t\t\t&:after {\n\t\t\t\tbackground: #fff;\n\t\t\t}\n\t\t}\n\n\t\t&.scroller-top {\n\t\t\ttop: calc(50% - calc(var(--coca-image-compare-handle-circle-height) / 2 + 25px));\n\n\t\t\t&:before,\n\t\t\t&:after {\n\t\t\t\tbackground: #fff;\n\t\t\t}\n\t\t}\n\n\t\t.scroller__thumb {\n\t\t\tposition: relative;\n\t\t\twidth: var(--coca-image-compare-handle-circle-width);\n\t\t\theight: var(--coca-image-compare-handle-circle-height);\n\n\t\t\t.left-arrow,\n\t\t\t.right-arrow {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: calc(50% - 6px);\n\t\t\t\tborder: 6px inset transparent;\n\t\t\t}\n\n\t\t\t.left-arrow {\n\t\t\t\tleft: 3px;\n\t\t\t\tborder-right-color: #fff;\n\t\t\t}\n\n\t\t\t.right-arrow {\n\t\t\t\tright: 3px;\n\t\t\t\tborder-left: 6px solid #fff;\n\t\t\t}\n\t\t}\n\t}\n\n\t// style for sculler.\n\t//.image-wrapper .label, .scroller {\n\t//  z-index: 10;\n\t//}\n\n\t.overlay {\n\t\t//opacity: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tz-index: 25;\n\t\t-webkit-user-select: none;\n\t\t-moz-user-select: none;\n\t\t-ms-user-select: none;\n\t\tuser-select: none;\n\t\tbackground-color: transparent;\n\t\tpointer-events: none;\n\t\ttransition: 300ms ease-in-out;\n\t}\n\n\t// Badge / Watermark feature — same rules as the regular slider container.\n\t.coca-bais-badge {\n\t\tposition: absolute;\n\t\tz-index: 30;\n\t\tpointer-events: none;\n\n\t\timg {\n\t\t\tposition: static;\n\t\t\tdisplay: block;\n\t\t\tmax-width: none;\n\t\t\theight: auto;\n\t\t}\n\n\t\t&.badge-center        { top: 50%; left: 50%; transform: translate(-50%, -50%); }\n\t\t&.badge-top-left      { top: 10px; left: 10px; }\n\t\t&.badge-top-center    { top: 10px; left: 50%; transform: translateX(-50%); }\n\t\t&.badge-top-right     { top: 10px; right: 10px; }\n\t\t&.badge-bottom-left   { bottom: 10px; left: 10px; }\n\t\t&.badge-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }\n\t\t&.badge-bottom-right  { bottom: 10px; right: 10px; }\n\t}\n\n\t.coca-bais-badge.badge-hover {\n\t\tvisibility: hidden;\n\t}\n\n\t&:not(.scrolling):hover .coca-bais-badge.badge-hover {\n\t\tvisibility: visible;\n\t}\n}\n\n// .coca-bais-shortcode .coca-bais-container {\n// \t.#{$pluginPrefix}-handle:hover {\n// \t\tborder-color: var(--coca-image-compare-handle-color);\n// \t}\n// }\n\n/* Top Label Positioning */\n.label-horizontal-top {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.top {\n\t\t\t.label{\n\t\t\t\ttop: 10px;\n\t\t\t\tleft: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.label-horizontal-top{\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.middle {\n\t\t\t.label{\n\t\t\t\ttop: 10px;\n\t\t\t\tleft: 52%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.label-horizontal-top {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.bottom  {\n\t\t\t.label{\n\t\t\t\ttop: 10px;\n\t\t\t\tright: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n/* Middle Label Positioning */\n.label-horizontal-middle {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.top {\n\t\t\t.label{\n\t\t\t\ttop: 47%;\n\t\t\t\tleft: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.label-horizontal-middle {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.middle {\n\t\t\t.label{\n\t\t\t\ttop: 47%;\n\t\t\t\tleft: 52%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.label-horizontal-middle {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.bottom  {\n\t\t\t.label{\n\t\t\t\ttop: 47%;\n\t\t\t\tright: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n/* Bottom Label Positioning */\n.label-horizontal-bottom {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.top {\n\t\t\t.label{\n\t\t\t\tbottom: 10px;\n\t\t\t\tleft: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.label-horizontal-bottom{\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.middle {\n\t\t\t.label{\n\t\t\t\tbottom: 10px;\n\t\t\t\tleft: 52%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.label-horizontal-bottom {\n\t.template-default.coca-image-compare-triple-wrapper,\n\t.template-style01.coca-image-compare-triple-wrapper,\n\t.template-style02.coca-image-compare-triple-wrapper,\n\t.template-style03.coca-image-compare-triple-wrapper,\n\t.template-style04.coca-image-compare-triple-wrapper,\n\t.template-style05.coca-image-compare-triple-wrapper,\n\t.template-style06.coca-image-compare-triple-wrapper,\n\t.template-style07.coca-image-compare-triple-wrapper{\n\t\t.bottom  {\n\t\t\t.label{\n\t\t\t\tbottom: 10px;\n\t\t\t\tright: 10px;\n\t\t\t}\n\t\t}\n\t}\n}"],"names":[],"sourceRoot":""}