{"version":3,"file":"blocks/ShowcaseSlider/index.css","mappings":";;;AAWA;EACC;EACA;EACA;EACA;EACA;EACA;AAVD;AAYC;EAEC;AAXF;AAcC;EACC;EACA;AAZF;AAeC;EACC;EACA;EACA;EACA;AAbF;AAgBC;EACC;EACA;EACA;EACA;EACA;EACA;AAdF;AAgBE;EACC;AAdH;;AAmBA;EACC;EACA;AAhBD,C;;;;ACpCA,gBAAgB;AAAhB;;;;;;;;;;;;;EAAA;AAcA;EACE;AAEF;AAAE;EAGE;AAAJ;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;AAHJ;AAME;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AALJ;AAQE;;EAEE;AANJ;AApCA;EA6CE;;;;IAAA;AAFF;AAOE;EACE;EACA;AALJ;AA/CA;EAuDE;;;;IAAA;AADF;AAOI;EACE;AALN;AAQI;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAPN;AApEA;EA+EE;;IAAA;AANF;AAUI;EACE;AARN;AAWI;EACE;AATN;AAgBE;EACE;EACA;EACA;EACA;AAdJ;AArFA;EAsGE;;;;IAAA;AAVF;AAeE;;EAEE;AAbJ;;AAiBA;;;;;;;;;;;;;;EAAA;AAgBE;;;EAGE;EAGA;AAjBJ;AAoBE;EACE;;;IAGE;EAlBJ;AACF;AAGA;EAkBE;;;;;IAAA;AAbF;AAmBE;;EAEE;AAjBJ;AAsBE;EACE;AApBJ,C","sources":["webpack://brandy-blocks/./src/components/ColorPicker/index.scss","webpack://brandy-blocks/./src/blocks/ShowcaseSlider/editor.scss"],"sourcesContent":["// These rules were nested under `.brandy-editor`, so the swatch only got its\n// size, border and background when some ancestor happened to carry that class.\n// Only the Pricing settings panels do; every other consumer — Avatar Group's\n// ring colour, Social Icons' icon/background/hover colours — rendered a bare\n// unstyled div: a visible label with no visible control beside it.\n//\n// A component's own styles must not depend on an ancestor the component does\n// not render, so the gate is gone. Nothing else in the codebase styles\n// `.color-picker`, so un-nesting changes no other rule's outcome. The Pricing\n// panels keep their `.brandy-editor` wrapper for the Typography component,\n// which is still gated the same way.\n.color-picker {\n\tborder-radius: 5px;\n\tborder: 1px solid #E3E8EE;\n\tbackground: #FFF;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 120px;\n\n\t&__head,\n\t&__tail {\n\t\tpadding: 7px;\n\t}\n\n\t&__head {\n\t\tdisplay: flex;\n\t\tborder-right: 1px solid #E3E8EE;\n\t}\n\n\t&__tail {\n\t\ttext-transform: uppercase;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t}\n\n\t.color-indicator {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tborder-radius: 5px;\n\t\tborder: 2px solid #F1F4F8;\n\t\tbackground: #fff;\n\t\tcursor: pointer;\n\n\t\tspan:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n.brandy-color-modal {\n\tpadding: 16px;\n\twidth: 260px;\n}\n","/**\n * Showcase Slider — editor styles.\n *\n * The canvas shows every slide at once, laid out the way its layout composes\n * one slide. Reproducing the frontend exactly would mean showing slide one and\n * hiding the rest behind a fixed panel — which is precisely the content an\n * author opened the editor to reach.\n *\n * So each slide is drawn as its own miniature of the composition: media and\n * panel in the layout's proportions, the panel carrying that slide's colour and\n * the layout's inset. What the canvas cannot show — that the panel holds still\n * while its content slides through it — is the one thing a still frame could\n * never convey anyway, so the hint says it in words instead.\n */\n.brandy-showcase-slider.is-editor-preview {\n  display: block;\n\n  .brandy-showcase-slider__slides {\n    // Numbering is the cheapest way to make the media/panel pairing legible:\n    // it is the pairing, not the order, that is easy to lose track of.\n    counter-reset: showcase-slide;\n  }\n\n  .brandy-showcase-slide {\n    counter-increment: showcase-slide;\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr var(--showcase-panel-width, 42%);\n    align-items: stretch;\n    margin-bottom: 24px;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    // The halves must butt together the way they do on the frontend; the\n    // border is the slide's, not the halves'.\n    overflow: hidden;\n  }\n\n  .brandy-showcase-slide::before {\n    content: 'Slide ' counter(showcase-slide);\n    position: absolute;\n    z-index: 2;\n    top: 0;\n    inset-inline-start: 0;\n    padding: 2px 8px;\n    border-end-end-radius: 4px;\n    background: #1e1e1e;\n    color: #fff;\n    font-size: 11px;\n    line-height: 1.6;\n    letter-spacing: 0.4px;\n    // A label, not a target — clicks belong to the blocks underneath.\n    pointer-events: none;\n  }\n\n  .showcase-slide__media,\n  .showcase-slide__panel {\n    min-width: 0;\n  }\n\n  /*\n   * The panel half gets the colour and the inset it will have on the frontend,\n   * so an author is editing text against the background it will actually sit\n   * on rather than against white.\n   */\n  .showcase-slide__panel {\n    padding: var(--showcase-panel-padding, 64px 48px);\n    background-color: var(--showcase-slide-panel-color, transparent);\n  }\n\n  /*\n   * Overlay: the panel floats over the media here too, so the author can see\n   * what the card covers. Absolute inside the slide rather than the region,\n   * since a slide is the whole composition in the canvas.\n   */\n  &.is-showcase-overlay {\n    .brandy-showcase-slide {\n      display: block;\n    }\n\n    .showcase-slide__panel {\n      --showcase-panel-padding: 40px;\n\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      inset-inline-end: 5%;\n      width: min(var(--showcase-panel-width, 42%), 460px);\n      background-color: var(--showcase-slide-panel-color, #fff);\n      border-radius: 8px;\n      box-shadow: 0 18px 40px rgb(0 0 0 / 18%);\n    }\n  }\n\n  /*\n   * Stacked: one column, panel under the media — the same order it renders in.\n   */\n  &.is-showcase-stacked {\n    .brandy-showcase-slide {\n      display: block;\n    }\n\n    .showcase-slide__panel {\n      --showcase-panel-padding: 40px 48px;\n    }\n  }\n\n  // Panel side is a frontend concern only: in the canvas the halves stay in\n  // authoring order so every slide reads the same way round.\n\n  .brandy-showcase-slider__hint {\n    margin: 0 0 12px;\n    font-size: 12px;\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  /*\n   * Nothing sets .is-selected without Embla, and Embla never runs in the\n   * canvas — every media half would otherwise sit permanently in the 3%\n   * overscan it exists to relax out of.\n   */\n  .brandy-zoom-settle:not(.wp-block-cover),\n  .brandy-zoom-settle.wp-block-cover .wp-block-cover__image-background {\n    transform: none;\n  }\n}\n\n/**\n * Preview mode — the composition, moving.\n *\n * The markup here is render.php's, so style.scss already owns every box; the\n * only thing missing is the motion, which on the frontend is written frame by\n * frame by view.js from Embla's progress. Embla never runs in the canvas, so\n * this supplies it declaratively instead.\n *\n * One rule moves all three tracks. Each is a flex row as wide as its own\n * viewport whose items are `flex: 0 0 100%`, so 100% of a track is exactly one\n * of its items — and the panel's item is narrower than the media's. Stepping\n * every track by the same percentage therefore moves each by its own item\n * width, which is the frontend's parallax arrived at without measuring\n * anything. Nothing here needs to know the slide count.\n */\n.brandy-showcase-slider.is-editor-playing {\n  .showcase__media .embla__container,\n  .showcase__panel .showcase__track,\n  .showcase__preview .showcase__track {\n    transform: translate3d(calc(var(--showcase-preview-index, 0) * -100%), 0, 0);\n    // Long enough to read as the panel holding still while its content travels\n    // through it, which is the whole point of previewing rather than stepping.\n    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .showcase__media .embla__container,\n    .showcase__panel .showcase__track,\n    .showcase__preview .showcase__track {\n      transition: none;\n    }\n  }\n\n  /*\n   * The settle is driven by `.is-selected`, which only Embla sets — so without\n   * this every media half sits permanently in the 3% overscan it exists to\n   * relax out of, cropping each photo by a hair. Same reset the stacked view\n   * needs, repeated because the two views no longer share a class.\n   */\n  .brandy-zoom-settle:not(.wp-block-cover),\n  .brandy-zoom-settle.wp-block-cover .wp-block-cover__image-background {\n    transform: none;\n  }\n\n  // Read-only content: the preview is for looking at, and a caret landing in a\n  // heading here would edit a copy that is thrown away on the next render.\n  .block-editor-block-preview__live-content {\n    pointer-events: none;\n  }\n}\n"],"names":[],"sourceRoot":""}