{"version":3,"file":"blocks/Tabs/index.css","mappings":";;;AAAA,gBAAgB;ACAhB;;;;;;;;;;;;;EAAA;AAeA;;;;;;;;;;EAAA;AAgBA;;;;;;;;;EAAA;AAgBA;;;;;;;;;;EAAA;AD3CC;EACC;0EAAA;EAEA;AA4CF;AAtCE;EACC;EACA;KAAA;UAAA;EACA;EACA;AAwCH;AAlCE;EAGC;AAkCH;AArCE;EAGC;AAqCH;AAxCE;EAGC;AAwCH;AA3CE;EAGC;AA2CH;AA9CE;EAGC;AA8CH;AAjDE;EAGC;AAiDH;AApDE;EAGC;AAoDH;AAvDE;EAGC;AAuDH;AA1DE;EAGC;AA0DH;AA7DE;EAGC;AA6DH;AAxDC;EACC;AA0DF;AArDE;EACC;EACA;AAuDH;AAhDE;EACC;AAkDH;;AA7CA;;wDAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;AAgDF;;AA7CA;;;;;;;;;;;;;gFAAA;AAcA;EAGE;;;;ICzCA;IACA;IACA;IAhBA;ED4GA;EAvDD;;IAOC;;;mCAAA;EAuDA;EAnDA;;IACC;EAsDD;EAlDD;IAGE;;;;MAEC;MACA;IAoDA;EACF;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/Tabs/editor.scss","webpack://brandy-blocks/./src/blocks/Tabs/_layout-presets.scss"],"sourcesContent":["@import 'layout-presets';\n\n.wp-block-brandy-tabs {\n\t// Editor tab nav\n\t.brandy-tabs__nav {\n\t\t/* The root now carries a gap between nav and panels, so this margin\n\t\t   would stack on top of it and double the spacing in the canvas only. */\n\t\tmargin-bottom: 0;\n\n\t\t// Editor renders tabs as <Button> from @wordpress/components, which\n\t\t// is `display: inline-flex; justify-content: flex-start` by default,\n\t\t// so its text would align left. Frontend uses a plain <button> (UA\n\t\t// default `text-align: center`). Force the editor to match.\n\t\t.brandy-tabs__tab {\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\tjustify-content: center;\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t// Panel visibility — controlled by active-tab-N class\n\t@for $i from 0 through 9 {\n\t\t&.active-tab-#{$i}\n\t\t\t.brandy-tabs__panels\n\t\t\t> .wp-block-brandy-tab:not(:nth-child(#{$i + 1})) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Ensure active panel is visible\n\t.brandy-tabs__panels > .wp-block-brandy-tab {\n\t\tdisplay: block;\n\t}\n\n\t// Tab position bottom in editor\n\t&.tab-position-bottom {\n\t\t.brandy-tabs__nav {\n\t\t\tmargin-bottom: 0;\n\t\t\tmargin-top: 16px;\n\t\t}\n\t}\n\n\t// Vertical layout in editor\n\t&.tab-position-left,\n\t&.tab-position-right {\n\t\t.brandy-tabs__nav {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n}\n\n/* The region's name in the canvas, so two areas side by side are tellable\n   apart. Editor-only — edit.jsx renders this span, save.jsx does not, so it\n   belongs here rather than in the shipped stylesheet. */\n.brandy-tabs__region-label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  opacity: 0.45;\n  user-select: none;\n}\n\n/* ---------------------------------------------------------------------------\n   Layout presets in the canvas.\n\n   Same grid as the frontend, different plumbing. The editor has no\n   `.brandy-tabs__panel` wrapper — `brandy/tab` renders straight into\n   `.brandy-tabs__panels` — so the pass-through chain is one level shorter and\n   has to be written here. The declarations come from the shared partial so the\n   two stylesheets cannot drift apart.\n\n   Specificity is deliberate: the `display: block` rule above is three classes,\n   so two classes on the root are needed to beat it. The rule that hides\n   inactive tabs is more specific still, which is what keeps them hidden rather\n   than stacked on the active one.\n   --------------------------------------------------------------------------- */\n@supports (grid-template-columns: subgrid) {\n\t.wp-block-brandy-tabs.layout-side-right,\n\t.wp-block-brandy-tabs.layout-side-left {\n\t\t> .brandy-tabs__panels,\n\t\t> .brandy-tabs__panels > .wp-block-brandy-tab {\n\t\t\t@include brandy-tabs-track-passthrough;\n\t\t}\n\n\t\t/* Blocks in the canvas carry a default vertical margin that the\n\t\t   frontend does not. The grid positions the regions, so on the side\n\t\t   area that margin does nothing but drop it out of line with the nav\n\t\t   it is meant to sit beside. */\n\t\t.brandy-tabs__region {\n\t\t\tmargin-block: 0;\n\t\t}\n\t}\n\n\t@media (max-width: 781px) {\n\t\t.wp-block-brandy-tabs.layout-side-right,\n\t\t.wp-block-brandy-tabs.layout-side-left {\n\t\t\t> .brandy-tabs__panels,\n\t\t\t> .brandy-tabs__panels > .wp-block-brandy-tab {\n\t\t\t\tdisplay: block;\n\t\t\t\tgrid-area: auto;\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * Shared pieces of the Tabs layout presets.\n *\n * The editor and the frontend nest the panels differently, so each stylesheet\n * has to name its own selectors — but the declarations behind them live here so\n * the two cannot drift:\n *\n *   frontend  __panels > __panel[role=tabpanel] > .brandy-tab-panel > region\n *   editor    __panels > .brandy-tab-panel                          > region\n *\n * The editor has no tabpanel wrapper: `brandy/tab`'s Edit renders straight into\n * `__panels`, and inactive tabs are hidden by editor.scss rather than by the\n * `hidden` attribute.\n */\n\n/**\n * Re-expose the root grid's tracks to a nested wrapper.\n *\n * Every level between `.brandy-tabs` and a region has to do this, otherwise the\n * region is placed against whatever the nearest grid happens to be — or, if no\n * ancestor is a grid at all, its `grid-area` is simply ignored and the layout\n * silently falls back to block flow.\n *\n * Gutters are inherited from the parent grid by default; restating them at each\n * level would multiply the gap down the chain.\n */\n@mixin brandy-tabs-track-passthrough {\n  @include brandy-tabs-track-passthrough-tracks;\n  display: grid;\n}\n\n/**\n * The track half of the pass-through, without turning the element on.\n *\n * Split out for the panels, whose `display` is now transitioned: the outgoing\n * panel is still painted while it cross-fades, so it has to keep its subgrid\n * for those few hundred milliseconds or its regions lose their placement and\n * scramble on the way out. `display` is the only part of the pass-through that\n * may be keyed on the active panel; the tracks are inert on a `display: none`\n * element, so they can safely apply to all of them.\n */\n@mixin brandy-tabs-track-passthrough-tracks {\n  grid-area: 1 / 1 / -1 / -1;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n/**\n * Where each region sits, given a grid whose first row is the nav's band.\n *\n * Placed with grid-row/grid-column rather than the four-value `grid-area`\n * shorthand, whose order is row/col/row-end/col-end. Written as\n * `1 / 1 / -1 / -1` the side region reads as \"span every column\" and silently\n * covers the main one; naming the axes makes the single-column span explicit.\n *\n * @param {number} $main-column Column the nav and main content share.\n * @param {number} $side-column Column the side area spans.\n */\n@mixin brandy-tabs-region-placement( $main-column, $side-column ) {\n  .brandy-tabs__region[data-area='main'] {\n    grid-row: 2;\n    grid-column: $main-column;\n  }\n\n  .brandy-tabs__region[data-area='side'] {\n    grid-row: 1 / -1;\n    grid-column: $side-column;\n  }\n}\n"],"names":[],"sourceRoot":""}