{"version":3,"file":"blocks/BeforeAfterImage/style-index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;EACA;EACA;EACA;KAAA;UAAA;EACA;AAAD;AAGC;EACC;EACA;EACA;EAEA;EACA;AAFF;AAIE;EACC;EACA;AAFH;AAOC;EACC;AALF;AASC;EACC;EACA;EACA;EACA;EAEA;EACA;AARF;AAYC;;EAEC;EACA;EACA;EACA;KAAA;EACA;AAVF;AAcC;EACC;AAZF;AAgBC;EACC;EACA;EACA;EACA;EACA;AAdF;AAkBC;;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhBF;AAmBC;EACC;EACA;AAjBF;AAoBC;EACC;EACA;AAlBF;AAuBE;EACC;EACA;EACA;AArBH;AAwBE;EACC;EACA;EACA;EACA;EACA;AAtBH;AA2BC;EACC;EACA;EACA;EACA;EACA;AAzBF;AA6BC;EACC;EACA;EACA;EACA;EACA;AA3BF;AA+BC;EACC;EACA;EACA;EACA;EACA;AA7BF;AAiCC;EACC;EACA;AA/BF;AAkCC;EACC;EACA;AAhCF;AAmCC;EACC;EACA;AAjCF;AAqCC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnCF;AAqCE;EACC;EACA;EACA;AAnCH;AAsCE;EACC;EACA;AApCH;AAyCC;;EAEC;EACA;AAvCF,C","sources":["webpack://brandy-blocks/./src/blocks/BeforeAfterImage/style.scss"],"sourcesContent":["/**\n * Before After Image Block - Styles\n *\n * @package BrandyBlocks\n */\n\n.wp-block-brandy-before-after-image {\n\tposition: relative;\n\twidth: 100%;\n\toverflow: hidden;\n\tuser-select: none;\n\ttouch-action: none;\n\n\t// Container holding both images and slider.\n\t.brandy-before-after-container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tcursor: ew-resize;\n\t\t// Inherit border-radius from parent (set via Gutenberg supports).\n\t\tborder-radius: inherit;\n\t\toverflow: hidden;\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--wp--preset--color--primary, #0073aa);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t// Vertical orientation cursor.\n\t&.orientation-vertical .brandy-before-after-container {\n\t\tcursor: ns-resize;\n\t}\n\n\t// Images wrapper.\n\t.brandy-before-after-images {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\tline-height: 0;\n\t\t// Inherit border-radius from parent (set via Gutenberg supports).\n\t\tborder-radius: inherit;\n\t\toverflow: hidden;\n\t}\n\n\t// Base image styles.\n\t.brandy-after-image,\n\t.brandy-before-image {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: cover;\n\t\tpointer-events: none;\n\t}\n\n\t// After image (background layer).\n\t.brandy-after-image {\n\t\tposition: relative;\n\t}\n\n\t// Before image (overlay with clip-path).\n\t.brandy-before-image {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t// Labels.\n\t.brandy-before-label,\n\t.brandy-after-label {\n\t\tposition: absolute;\n\t\tpadding: 6px 12px;\n\t\tbackground: #FFFFFF70;\n\t\tbackdrop-filter: blur(12px);\n\t\tcolor: #0D0D0D;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t\tborder-radius: 4px;\n\t\tpointer-events: none;\n\t\tz-index: 2;\n\t}\n\n\t.brandy-before-label {\n\t\ttop: 16px;\n\t\tleft: 16px;\n\t}\n\n\t.brandy-after-label {\n\t\ttop: 16px;\n\t\tright: 16px;\n\t}\n\n\t// Vertical orientation labels.\n\t&.orientation-vertical {\n\t\t.brandy-before-label {\n\t\t\ttop: 16px;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\n\t\t.brandy-after-label {\n\t\t\ttop: auto;\n\t\t\tbottom: 16px;\n\t\t\tright: auto;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t// Slider handle.\n\t.brandy-slider-handle {\n\t\tposition: absolute;\n\t\tz-index: 3;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t// Horizontal orientation handle.\n\t&.orientation-horizontal .brandy-slider-handle {\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 4px;\n\t\ttransform: translateX(-50%);\n\t\tflex-direction: column;\n\t}\n\n\t// Vertical orientation handle.\n\t&.orientation-vertical .brandy-slider-handle {\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 4px;\n\t\ttransform: translateY(-50%);\n\t\tflex-direction: row;\n\t}\n\n\t// Slider line.\n\t.brandy-slider-line {\n\t\tbackground: #fff;\n\t\tbox-shadow: 0 0 4px rgba(0, 0, 0, 0.4);\n\t}\n\n\t&.orientation-horizontal .brandy-slider-line {\n\t\twidth: 2px;\n\t\theight: 100%;\n\t}\n\n\t&.orientation-vertical .brandy-slider-line {\n\t\theight: 2px;\n\t\twidth: 100%;\n\t}\n\n\t// Slider button (drag handle).\n\t.brandy-slider-button {\n\t\tposition: absolute;\n\t\twidth: 44px;\n\t\theight: 44px;\n\t\tbackground: #fff;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n\t\ttransition: transform 0.15s ease, box-shadow 0.15s ease;\n\n\t\tsvg {\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tcolor: #333;\n\t\t}\n\n\t\t&:hover {\n\t\t\ttransform: scale(1.1);\n\t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n\t\t}\n\t}\n\n\t// Active/dragging state.\n\t&:active .brandy-slider-button,\n\t.brandy-before-after-container:focus .brandy-slider-button {\n\t\ttransform: scale(1.15);\n\t\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);\n\t}\n}\n"],"names":[],"sourceRoot":""}