{"version":3,"file":"blocks/InfoBox/style-index.css","mappings":";;;AAOA;EACC;EAMA;EAMA;EAEA;EACA;EAIA;AApBD;AAsBC;EACC;EACA;EACA;EACA;EACA;EACA;AApBF;AAsBE;EACC;EACA;EACA;AApBH;AAwBC;EACC;AAtBF;AA0BE;EACC;AAxBH;AA2BE;EACC;AAzBH;AAiCC;EACC;AA/BF;AAkCC;EACC;EACA;AAhCF;AAoCC;EACC;EACA;AAlCF;AAqCC;EACC;EACA;AAnCF;AAsCC;EACC;EACA;AApCF;AA2CE;EAGC;AA3CH;AA8CE;EACC;AA5CH;AAmDC;EAEC;EACA;EACA;EAAA;AAlDF;AAqDC;EACC;AAnDF;AAsDC;EACC;AApDF;AAwDC;EACC;AAtDF;AAwDE;EACC;AAtDH;AA0DC;EACC;IACC;EAxDD;EA0DC;IACC;EAxDF;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/InfoBox/style.scss"],"sourcesContent":["// Info Box — shared editor + frontend styles.\n//\n// The wrapper carries every custom property (icon size and colours) because\n// the shaped backdrop is drawn here, not on the <i>: a circle needs the glyph\n// size to work out its own padding, and the editor and the front end have to\n// arrive at the same number from the same attribute.\n\n.brandy-info-box {\n\t--brandy-info-box-icon-size: 40px;\n\t// The icon is the accent in this block, so it takes the site's primary\n\t// colour rather than the text colour. `brandy-primary` is injected per\n\t// niche by AbstractNicheSetup::update_theme_json() and is absent on a\n\t// non-Brandy theme, where the fallback keeps the old inherit-the-text\n\t// behaviour. Same pattern as Progress Bar.\n\t--brandy-info-box-icon-color: var(--wp--preset--color--brandy-primary, currentColor);\n\t// A tint of the icon colour, not `transparent`: the shape control is a\n\t// no-op with a transparent backdrop, so picking \"circle\" looked broken\n\t// until the author also picked a colour. Derived from the property above,\n\t// so the backdrop tracks the primary colour by default and the author's\n\t// pick once they choose one; overridden outright by a chosen background.\n\t--brandy-info-box-icon-bg: color-mix(in srgb, var(--brandy-info-box-icon-color) 12%, transparent);\n\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\t// The block's own Block spacing wins; styles.js writes it as a custom\n\t// property because core only serializes blockGap for blocks with layout\n\t// support. Falls back to the theme's gap, then to a sane rhythm.\n\tgap: var(--brandy-info-box-gap, var(--wp--preset--spacing--10, 1.25rem));\n\n\t&__media {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 0 0 auto;\n\t\tcolor: var(--brandy-info-box-icon-color);\n\t\tline-height: 1;\n\n\t\ti {\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--brandy-info-box-icon-size);\n\t\t\tline-height: 1;\n\t\t}\n\t}\n\n\t&__content {\n\t\tmin-width: 0;\n\n\t\t// The block owns the rhythm between title and text; core's own margins\n\t\t// would otherwise stack on top of the flex gap.\n\t\t> *:first-child {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t> *:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t// LAYOUT\n\t// Stacked puts the icon above the words; inline sets it beside them. Both\n\t// are the same flex container with a different direction, so the alignment\n\t// rules below apply to either.\n\t&.is-layout-stacked {\n\t\tflex-direction: column;\n\t}\n\n\t&.is-layout-inline {\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t}\n\n\t// ALIGNMENT\n\t&.is-aligned-left {\n\t\talign-items: flex-start;\n\t\ttext-align: left;\n\t}\n\n\t&.is-aligned-center {\n\t\talign-items: center;\n\t\ttext-align: center;\n\t}\n\n\t&.is-aligned-right {\n\t\talign-items: flex-end;\n\t\ttext-align: right;\n\t}\n\n\t// An inline box aligns its icon to the text baseline-ish top regardless of\n\t// the text alignment: centring the row would leave a tall paragraph pushing\n\t// the icon into the middle of nowhere.\n\t&.is-layout-inline {\n\t\t&.is-aligned-left,\n\t\t&.is-aligned-center,\n\t\t&.is-aligned-right {\n\t\t\talign-items: flex-start;\n\t\t}\n\n\t\t&.is-aligned-right {\n\t\t\tflex-direction: row-reverse;\n\t\t}\n\t}\n\n\t// SHAPED BACKDROP\n\t// Padding is proportional to the glyph so the shape keeps its ring at any\n\t// size; a fixed padding looks tight at 16px and lost at 120px.\n\t&.has-icon-circle &__media,\n\t&.has-icon-square &__media {\n\t\tbackground-color: var(--brandy-info-box-icon-bg);\n\t\tpadding: calc(var(--brandy-info-box-icon-size) * 0.5);\n\t\twidth: fit-content;\n\t}\n\n\t&.has-icon-circle &__media {\n\t\tborder-radius: 50%;\n\t}\n\n\t&.has-icon-square &__media {\n\t\tborder-radius: calc(var(--brandy-info-box-icon-size) * 0.2);\n\t}\n\n\t// HOVER\n\t&.has-hover-lift {\n\t\ttransition: transform 0.2s ease, box-shadow 0.2s ease;\n\n\t\t&:hover {\n\t\t\ttransform: translateY(-4px);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t&.has-hover-lift {\n\t\t\ttransition: none;\n\n\t\t\t&:hover {\n\t\t\t\ttransform: none;\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}