{"version":3,"file":"blocks/PricingOptions/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;;;;;EAAA;AAWA;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;AAAD;AAEC;EACC;AAAF;AAGC;EACC;AADF;AAIC;EACC;AAFF;AAKC;EACC;EACA;AAHF;AAvBA;EA6BC;;;;;IAAA;AAED;AAIC;EACC;AAFF;AAKC;EACC;AAHF;AArCA;EA2CC;;;;IAAA;AACD;AAIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAFF;AAKC;EACC;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;AAJF;AASC;EACC;EACA;AAPF;AAUC;EACC;EACA;EACA;EACA;EACA;EACA;AARF;AA9EA;EAyFC;;;IAAA;AALD;AASC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAPF;AASE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAPH;AAYC;EACC;AAVF;AAYE;EACC;AAVH;AAsBE;EACC;EACA;EACA;EACA;EACA;EACA;AApBH;AAuBE;EACC;EAGA;EACA;EACA;EACA;AAvBH;AA2BE;EACC;AAzBH;AAGC;EAyBC;;;;IAAA;AArBF;AA0BE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxBH;AAjBC;EA6CC;;;;;IAAA;AApBF;AA0BE;EACC;AAxBH;AA9JA;EA0LC;;;IAAA;AAtBD;AA2BE;EACC;AAzBH;AAwBE;EACC;AAtBH;AAqBE;EACC;AAnBH;AAkBE;EACC;AAhBH;AAeE;EACC;AAbH;AAYE;EACC;AAVH;AAoBC;EACC;AAlBF;AAoBE;EACC;EACA;AAlBH;AAqBE;EACC;EACA;EACA;EACA,kHACC;AApBJ;AA0BE;EACC;AAxBH;AA2BE;EACC;AAzBH;AA4BE;EACC;EACA;AA1BH;AAyCE;EACC;EACA;EACA;AAvCH;AA0CE;EACC;EACA;EACA;EACA;EACA;EACA,4GACC;AAzCJ;AA6CE;EACC;AA3CH;AA8CE;EACC;EACA;AA5CH;AAgDC;EAEC;;IAEC;EA/CD;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/PricingOptions/style.scss"],"sourcesContent":["/**\n * Pricing Options — shared editor + frontend styles.\n *\n * Three layouts over one piece of markup. Every one of them is a real radio\n * group; the differences are which parts are drawn — the segmented layout hides\n * the dot and slides a thumb, the other two show the dot and drop the thumb.\n *\n * The rule that switches the prices is not here: it belongs to the table, which\n * is the only element that contains both the chooser and the plans.\n */\n\n.brandy-pricing-options {\n\t--pricing-option-radius: 999px;\n\t--pricing-option-accent: var(--wp--preset--color--brandy-primary, currentColor);\n\t--pricing-option-rail: color-mix(in srgb, currentColor 8%, transparent);\n\t--pricing-option-line: color-mix(in srgb, currentColor 20%, transparent);\n\t--pricing-option-duration: 240ms;\n\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5em;\n\n\t&.has-options-left {\n\t\talign-items: flex-start;\n\t}\n\n\t&.has-options-center {\n\t\talign-items: center;\n\t}\n\n\t&.has-options-right {\n\t\talign-items: flex-end;\n\t}\n\n\t&__heading {\n\t\tfont-size: 0.875em;\n\t\topacity: 0.7;\n\t}\n\n\t/*\n\t * SHAPE\n\t *\n\t * The rail, the options and the thumb all round together or the thumb's\n\t * corners show through the rail's. One property, three users.\n\t */\n\t&.is-shape-rounded {\n\t\t--pricing-option-radius: 8px;\n\t}\n\n\t&.is-shape-square {\n\t\t--pricing-option-radius: 0;\n\t}\n\n\t/*\n\t * Clipped rather than hidden. `display: none` or `visibility: hidden` takes\n\t * a radio out of the tab order, and these are the only thing the keyboard\n\t * has to operate — everything visible is drawn by the label around it.\n\t */\n\t&__input {\n\t\tposition: absolute !important;\n\t\twidth: 1px !important;\n\t\theight: 1px !important;\n\t\tmargin: -1px;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tclip-path: inset(50%);\n\t\twhite-space: nowrap;\n\t}\n\n\t&__option {\n\t\tposition: relative;\n\t\t// Above the thumb, which is painted behind the whole row.\n\t\tz-index: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\tcursor: pointer;\n\t\tline-height: 1.2;\n\t\ttransition: color var(--pricing-option-duration) ease;\n\t\tuser-select: none;\n\t}\n\n\t// The ring goes on the label, since the input it belongs to is clipped.\n\t// Without this the chooser is silently unusable by keyboard.\n\t&__option:has(&__input:focus-visible) {\n\t\toutline: 2px solid currentColor;\n\t\toutline-offset: 2px;\n\t}\n\n\t&__badge {\n\t\tpadding: 0.2em 0.6em;\n\t\tborder-radius: var(--pricing-option-radius);\n\t\tbackground-color: color-mix(in srgb, currentColor 14%, transparent);\n\t\tfont-size: 0.75em;\n\t\tfont-weight: 600;\n\t\twhite-space: nowrap;\n\t}\n\n\t/*\n\t * The dot. Drawn rather than native so it can take the accent colour and\n\t * animate; the native input is still the thing being operated.\n\t */\n\t&__marker {\n\t\tdisplay: grid;\n\t\tflex-shrink: 0;\n\t\tplace-items: center;\n\t\twidth: 1.15em;\n\t\theight: 1.15em;\n\t\tborder: 1.5px solid var(--pricing-option-line);\n\t\tborder-radius: 50%;\n\t\ttransition: border-color var(--pricing-option-duration) ease;\n\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t\twidth: 0.55em;\n\t\t\theight: 0.55em;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: var(--pricing-option-accent);\n\t\t\ttransform: scale(0);\n\t\t\ttransition: transform var(--pricing-option-duration)\n\t\t\t\tcubic-bezier(0.4, 0, 0.2, 1);\n\t\t}\n\t}\n\n\t&__option:has(&__input:checked) &__marker {\n\t\tborder-color: var(--pricing-option-accent);\n\n\t\t&::after {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\n\t// ── Layout: segmented ───────────────────────────────────────────────────\n\t//\n\t// The original toggle, widened. Equal `1fr` tracks are what make the thumb's\n\t// arithmetic true: under flex, `flex: 1 1 0` cannot shrink an option below\n\t// its min-content width, so an option carrying a badge came out far wider\n\t// than one without and the thumb straddled both.\n\n\t&.is-options-segmented {\n\t\t.brandy-pricing-options__track {\n\t\t\tposition: relative;\n\t\t\tdisplay: inline-grid;\n\t\t\tgrid-template-columns: repeat(var(--pricing-options-count, 2), 1fr);\n\t\t\tpadding: 4px;\n\t\t\tborder-radius: var(--pricing-option-radius);\n\t\t\tbackground-color: var(--pricing-option-rail);\n\t\t}\n\n\t\t.brandy-pricing-options__option {\n\t\t\tjustify-content: center;\n\t\t\t// Grid items floor at min-content too; this is what lets the\n\t\t\t// narrower option fill its share rather than hug its text.\n\t\t\tmin-width: 0;\n\t\t\tpadding: 0.6em 1.4em;\n\t\t\tborder-radius: var(--pricing-option-radius);\n\t\t\tfont-weight: 500;\n\t\t}\n\n\t\t// The dot would fight the thumb for the same job.\n\t\t.brandy-pricing-options__marker {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/*\n\t\t * One thumb slid between positions, not a background on whichever\n\t\t * option is checked: a background cannot animate from one element to\n\t\t * another, and the slide is what makes this read as a switch.\n\t\t */\n\t\t.brandy-pricing-options__thumb {\n\t\t\tposition: absolute;\n\t\t\tz-index: 0;\n\t\t\ttop: 4px;\n\t\t\tbottom: 4px;\n\t\t\tleft: 4px;\n\t\t\twidth: calc((100% - 8px) / var(--pricing-options-count, 2));\n\t\t\tborder-radius: var(--pricing-option-radius);\n\t\t\tbackground-color: var(--pricing-option-accent);\n\t\t\tbox-shadow: 0 1px 3px rgb(0 0 0 / 12%);\n\t\t\ttransform: translateX(calc(var(--pricing-option-index, 0) * 100%));\n\t\t\ttransition: transform var(--pricing-option-duration)\n\t\t\t\tcubic-bezier(0.4, 0, 0.2, 1);\n\t\t}\n\n\t\t/*\n\t\t * The label riding on the thumb. Only ever set from the author's\n\t\t * colour, and inherited when that is absent — a hardcoded value would\n\t\t * be wrong the moment the thumb is tinted, which is exactly when this\n\t\t * matters.\n\t\t */\n\t\t.brandy-pricing-options__option:has(.brandy-pricing-options__input:checked) {\n\t\t\tcolor: var(--pricing-option-active-text, inherit);\n\t\t}\n\t}\n\n\t/*\n\t * Which segment the thumb sits over. An index rather than a per-option\n\t * transform so the thumb keeps one transition to animate along.\n\t */\n\t@for $i from 0 through 5 {\n\t\t&.is-options-segmented:has(#{&}__input--#{$i}:checked) {\n\t\t\t--pricing-option-index: #{$i};\n\t\t}\n\t}\n\n\t// ── Layout: list ────────────────────────────────────────────────────────\n\t//\n\t// Rows down the card, each one a whole hit target. The layout for a single\n\t// plan sold in several shapes, where the labels are sentences rather than\n\t// one word and a segmented control would wrap into nonsense.\n\n\t&.is-options-list {\n\t\talign-items: stretch;\n\n\t\t.brandy-pricing-options__track {\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5em;\n\t\t}\n\n\t\t.brandy-pricing-options__option {\n\t\t\tpadding: 0.75em 1em;\n\t\t\tborder: 1px solid var(--pricing-option-line);\n\t\t\tborder-radius: var(--pricing-option-radius);\n\t\t\ttransition:\n\t\t\t\tborder-color var(--pricing-option-duration) ease,\n\t\t\t\tbackground-color var(--pricing-option-duration) ease;\n\t\t}\n\n\t\t// Pushes the badge to the far end of the row, where it reads as a note\n\t\t// on the option rather than part of its name.\n\t\t.brandy-pricing-options__badge {\n\t\t\tmargin-left: auto;\n\t\t}\n\n\t\t.brandy-pricing-options__thumb {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.brandy-pricing-options__option:has(.brandy-pricing-options__input:checked) {\n\t\t\tborder-color: var(--pricing-option-accent);\n\t\t\tbackground-color: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--pricing-option-accent) 6%,\n\t\t\t\ttransparent\n\t\t\t);\n\t\t}\n\t}\n\n\t// ── Layout: cards ───────────────────────────────────────────────────────\n\t//\n\t// The same rows turned side by side and given room to breathe. Wraps rather\n\t// than scrolls, so a fourth option drops to its own line instead of\n\t// squeezing the other three.\n\n\t&.is-options-cards {\n\t\t.brandy-pricing-options__track {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: 0.75em;\n\t\t}\n\n\t\t.brandy-pricing-options__option {\n\t\t\tflex: 1 1 auto;\n\t\t\tpadding: 1em 1.25em;\n\t\t\tborder: 1px solid var(--pricing-option-line);\n\t\t\tborder-radius: var(--pricing-option-radius);\n\t\t\tfont-weight: 500;\n\t\t\ttransition:\n\t\t\t\tborder-color var(--pricing-option-duration) ease,\n\t\t\t\tbox-shadow var(--pricing-option-duration) ease;\n\t\t}\n\n\t\t.brandy-pricing-options__thumb {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.brandy-pricing-options__option:has(.brandy-pricing-options__input:checked) {\n\t\t\tborder-color: var(--pricing-option-accent);\n\t\t\tbox-shadow: 0 0 0 1px var(--pricing-option-accent);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\n\t\t&__marker::after,\n\t\t.brandy-pricing-options__thumb {\n\t\t\ttransition: none;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}