{"version":3,"file":"blocks/ProgressBar/style-index.css","mappings":";;;AAOA;EACC;EACA;EACA;EACA;EACA;EAEA;AAPD;AASC;EACC;EACA;EACA;EACA;EACA;AAPF;AAUC;EACC;AARF;AAWC;EACC;EACA;AATF;AAYC;EACC;EACA;EACA;EACA;EACA;AAVF;AAgBC;EACC;EACA;EACA;AAdF;AAgBE;EACC;AAdH;AAoBE;;EAEC;AAlBH;AA4BC;EACC;AA1BF;AA4BE;EACC;EACA;AA1BH;AA4BG;EACC;EACA;EACA;EACA;EAUA;AAnCJ;AA2CG;EACC;AAzCJ;AAmDC;EACC;EACA;AAjDF;AAkEE;EACC,+PAhBS;EAiBT,uPAjBS;AA/CZ;AAyEE;EACC;AAvEH;AAmFC;EACC;AAjFF;AAmFE;;EAEC;AAjFH;AAoFE;EACC;EACA;EACA;EACA;EACA;AAlFH;AAuFE;EACC;AArFH;AAyFC;EACC;IACC;EAvFD;EAyFC;IACC;EAvFF;AACF;;AA4FA;EACC;IACC;EAzFA;EA4FD;IACC;EA1FA;AACF;AA8FA;EACC;IACC;EA5FA;EA+FD;IACC;EA7FA;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/ProgressBar/style.scss"],"sourcesContent":["// Progress Bar — shared editor + frontend styles.\n//\n// The fill's width is a custom property set by the renderer, NOT an inline\n// width: the Interactivity API's style binding overrides the inline value at\n// runtime, so keeping the truth in a variable means the bar is still the right\n// length on a page where the view module never loads.\n\n.brandy-progress-bar {\n\t--brandy-progress-height: 10px;\n\t--brandy-progress-fill: 0%;\n\t--brandy-progress-duration: 1200ms;\n\t--brandy-progress-bar-color: var(--wp--preset--color--brandy-primary, currentColor);\n\t--brandy-progress-track-color: color-mix(in srgb, currentColor 12%, transparent);\n\n\tbox-sizing: border-box;\n\n\t&__header {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tjustify-content: space-between;\n\t\tgap: 0.5em;\n\t\tmargin-bottom: 0.4em;\n\t}\n\n\t&__label {\n\t\tfont-weight: 600;\n\t}\n\n\t&__value {\n\t\tflex: 0 0 auto;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\n\t&__track {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\twidth: 100%;\n\t\theight: var(--brandy-progress-height);\n\t\tbackground-color: var(--brandy-progress-track-color);\n\t}\n\n\t// The width here is the truth, in every runtime and at every moment. The\n\t// animation is a keyframe the view module opts into, so a page where that\n\t// module never runs shows a full bar rather than an empty one.\n\t&__fill {\n\t\twidth: var(--brandy-progress-fill);\n\t\theight: 100%;\n\t\tbackground-color: var(--brandy-progress-bar-color);\n\n\t\t&.is-filling {\n\t\t\tanimation: brandy-progress-fill var(--brandy-progress-duration)\n\t\t\t\tease-out 1;\n\t\t}\n\t}\n\n\t&.is-rounded {\n\t\t.brandy-progress-bar__track,\n\t\t.brandy-progress-bar__fill {\n\t\t\tborder-radius: calc(var(--brandy-progress-height) / 2);\n\t\t}\n\t}\n\n\t// STYLE: Striped\n\t//\n\t// The stripes live on a pseudo-element rather than the fill itself. The fill\n\t// already owns an `animation` for the width keyframe, and a second animation\n\t// on the same element would have to share that shorthand — a pseudo-element\n\t// keeps the two independent.\n\t&.is-style-striped {\n\t\t--brandy-progress-stripe: calc(var(--brandy-progress-height) * 1.4);\n\n\t\t.brandy-progress-bar__fill {\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: 0;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\t45deg,\n\t\t\t\t\trgba(255, 255, 255, 0.25) 25%,\n\t\t\t\t\ttransparent 25%,\n\t\t\t\t\ttransparent 50%,\n\t\t\t\t\trgba(255, 255, 255, 0.25) 50%,\n\t\t\t\t\trgba(255, 255, 255, 0.25) 75%,\n\t\t\t\t\ttransparent 75%,\n\t\t\t\t\ttransparent\n\t\t\t\t);\n\t\t\t\tbackground-size: var(--brandy-progress-stripe)\n\t\t\t\t\tvar(--brandy-progress-stripe);\n\t\t\t}\n\n\t\t\t// `is-filling` is set only when the author left Animate on, the\n\t\t\t// reader has not opted out of motion and the bar has scrolled into\n\t\t\t// view — so the stripes move under exactly the conditions the fill\n\t\t\t// itself animates under, and a static bar keeps static stripes.\n\t\t\t&.is-filling::after {\n\t\t\t\tanimation: brandy-progress-stripes 1s linear infinite;\n\t\t\t}\n\t\t}\n\t}\n\n\t// STYLE: Segmented\n\t//\n\t// The mask sits on the track, so it notches the track and the fill in one\n\t// pass and the fill's width stays the exact value — the segments are a\n\t// window onto the bar, never a rounding of it.\n\t&.is-style-segmented {\n\t\t--brandy-progress-segment: calc(var(--brandy-progress-height) * 1.6);\n\t\t--brandy-progress-segment-gap: calc(var(--brandy-progress-height) * 0.4);\n\n\t\t$notches: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t#000 0\n\t\t\t\tcalc(\n\t\t\t\t\tvar(--brandy-progress-segment) -\n\t\t\t\t\t\tvar(--brandy-progress-segment-gap)\n\t\t\t\t),\n\t\t\ttransparent\n\t\t\t\tcalc(\n\t\t\t\t\tvar(--brandy-progress-segment) -\n\t\t\t\t\t\tvar(--brandy-progress-segment-gap)\n\t\t\t\t)\n\t\t\t\tvar(--brandy-progress-segment)\n\t\t);\n\n\t\t.brandy-progress-bar__track {\n\t\t\t-webkit-mask-image: $notches;\n\t\t\tmask-image: $notches;\n\t\t}\n\t}\n\n\t// STYLE: Gradient\n\t//\n\t// Mixed from the bar colour rather than hardcoded, so the ramp follows\n\t// whatever colour the author picks.\n\t&.is-style-gradient {\n\t\t.brandy-progress-bar__fill {\n\t\t\tbackground-image: linear-gradient(\n\t\t\t\tto right,\n\t\t\t\tcolor-mix(in srgb, var(--brandy-progress-bar-color) 45%, #fff),\n\t\t\t\tvar(--brandy-progress-bar-color)\n\t\t\t);\n\t\t}\n\t}\n\n\t// STYLE: Inline label\n\t//\n\t// Header and track share one grid cell instead of stacking, which puts the\n\t// text over the bar without the renderer having to emit different markup.\n\t&.is-style-inline-label {\n\t\tdisplay: grid;\n\n\t\t.brandy-progress-bar__header,\n\t\t.brandy-progress-bar__track {\n\t\t\tgrid-area: 1 / 1;\n\t\t}\n\n\t\t.brandy-progress-bar__header {\n\t\t\tz-index: 1;\n\t\t\talign-items: center;\n\t\t\talign-self: center;\n\t\t\tmargin-bottom: 0;\n\t\t\tpadding-inline: 0.75em;\n\t\t}\n\n\t\t// A 10px track cannot hold text. The floor keeps the style legible\n\t\t// whatever the Height control is set to.\n\t\t.brandy-progress-bar__track {\n\t\t\theight: max(var(--brandy-progress-height), 2em);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.brandy-progress-bar__fill.is-filling {\n\t\t\tanimation: none;\n\n\t\t\t&::after {\n\t\t\t\tanimation: none;\n\t\t\t}\n\t\t}\n\t}\n}\n\n@keyframes brandy-progress-fill {\n\tfrom {\n\t\twidth: 0;\n\t}\n\n\tto {\n\t\twidth: var(--brandy-progress-fill);\n\t}\n}\n\n// Shifting by exactly one tile makes the loop seamless.\n@keyframes brandy-progress-stripes {\n\tfrom {\n\t\tbackground-position: 0 0;\n\t}\n\n\tto {\n\t\tbackground-position: var(--brandy-progress-stripe, 1em) 0;\n\t}\n}\n"],"names":[],"sourceRoot":""}