{"version":3,"file":"blocks/CircularBadge/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;;EAAA;AAQA;EACC;IACC;EACA;EACD;IACC;EACA;AACF;AAEA;EACC;AAAD;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;AAFD;AAIC;EACC;AAFF;AAKC;EACC;AAHF;;AAOA;;;;;;;;;;;;;;;;EAAA;AAiBA;EACC;EACA;EACA;EAIA;EACA;EACA;AAPD;;AAUA;EACC;EACA;EACA;EACA;EAGA;AATD;AAWC;EAGC;EACA;EACA;AAXF;;AAeA;EACC;EACA;AAZD;;AAgBA;EACC;AAbD;;AAgBA;EAEC;EACA;EACA;EACA;EACA;EACA;EAEA;AAfD;;AAoBA;EACC;IACC;EAjBA;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/CircularBadge/style.scss"],"sourcesContent":["/**\n * Circular Badge.\n *\n * The badge itself is a plain round box, so WordPress's own background, text,\n * border and typography supports land on it without any help — the SVG only\n * carries the curved text.\n */\n\n@keyframes brandy-circular-badge-spin {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n.block-editor-block-list__block.brandy-circular-badge {\n\twidth: var(--brandy-circular-badge-size, 220px) !important;\n}\n\n.brandy-circular-badge {\n\tposition: relative;\n\twidth: var(--brandy-circular-badge-size, 220px) !important;\n\taspect-ratio: 1;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t// A badge is a fixed-size medallion, so it should not be stretched by a\n\t// flex or grid parent the way a full-width block would want to be.\n\tflex: none;\n\n\t&.aligncenter {\n\t\tmargin-inline: auto;\n\t}\n\n\t&.alignright {\n\t\tmargin-inline-start: auto;\n\t}\n}\n\n/**\n * The disc the ring of text encloses.\n *\n * A pseudo-element rather than a real one: it is pure decoration, so keeping it\n * out of the markup means the saved HTML never has to change if its shape does.\n *\n * Sizing it is not just \"inset plus a bit\". Letters on a textPath grow *outward*\n * from the baseline, so the visible gap outside them is only\n * `textInset - cap-height` while the gap inside them starts at the baseline. Set\n * the disc naively and the band reads lopsided — thin on the outside, fat on the\n * inside. Doubling the inset and taking back roughly the cap height minus the\n * descender puts the letters in the middle of the band instead.\n *\n * The first term is a floor: at small insets the letters already crowd the badge\n * edge, and the disc has to stop clear of their descenders rather than ride up\n * over them.\n */\n.brandy-circular-badge.has-centre-background::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: max(\n\t\tcalc(var(--brandy-circular-badge-inset, 18px) + 0.25em),\n\t\tcalc(2 * var(--brandy-circular-badge-inset, 18px) - 0.55em)\n\t);\n\tborder-radius: 50%;\n\tbackground: var(--brandy-circular-badge-centre-background);\n\tpointer-events: none;\n}\n\n.brandy-circular-badge__ring {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\t// The ring is decoration sitting behind the centre, and it must never eat\n\t// clicks meant for whatever the author put in the middle.\n\tpointer-events: none;\n\n\ttext {\n\t\t// Inherit rather than declare: this is what lets the block's own text\n\t\t// colour and typography controls reach the curved text.\n\t\tfill: currentColor;\n\t\tfont: inherit;\n\t\tletter-spacing: inherit;\n\t}\n}\n\n.brandy-circular-badge.is-spinning .brandy-circular-badge__ring {\n\ttransform-origin: center;\n\tanimation: brandy-circular-badge-spin var(--brandy-circular-badge-duration, 16s)\n\t\tlinear infinite;\n}\n\n.brandy-circular-badge.is-reversed .brandy-circular-badge__ring {\n\tanimation-direction: reverse;\n}\n\n.brandy-circular-badge__centre {\n\t// Above the disc, which the wrapper paints with ::before.\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\t// Keep the centre clear of the ring on every side, whatever the diameter.\n\tmax-width: 55%;\n}\n\n// A badge that turns forever is exactly the kind of motion this setting exists\n// to stop.\n@media (prefers-reduced-motion: reduce) {\n\t.brandy-circular-badge.is-spinning .brandy-circular-badge__ring {\n\t\tanimation: none;\n\t}\n}\n"],"names":[],"sourceRoot":""}