/*
 * Polaris icons in the host theme's own builder markup — Tabs, Accordion, Buttons.
 *
 * DELIBERATELY UNSCOPED. Every other Polaris stylesheet is scoped to #polaris-ui,
 * but this one styles icons we put inside the THEME's own element markup, where that
 * scope cannot reach. It loads on the front end only, and only once content actually
 * uses a Keenicon in a builder icon field.
 *
 * Why it is needed: the theme spaces element icons with rules keyed on `i.fa`
 * (`i.fa.icon-position-left`, `.btn-icon-left .fa`), which a Keenicon never matches.
 * So it gets no spacing at all — except inside a tab nav, where it instead inherits
 * the theme's generic list-icon rule, `ul i:not(.icon-box *):not(.menu-smart-social
 * *){margin-right:18px}`: a bullet-list gap, far too wide beside a tab label.
 *
 * ONE gap value for every context, in em so it tracks the label size. The theme's own
 * gaps differ per context (18px on tabs and accordions, 9px on buttons) and are wider
 * than this by design decision, not by accident: Keenicons are drawn tighter in their
 * em box, so matching the theme's numbers reads as a gap rather than a pairing.
 *
 * Selectors mirror the theme's own specificity pattern (body:not(.rtl) …) so they win
 * against its rules without !important, and RTL flips the way the theme's do.
 *
 * Selectors match `i[class^="ph"]`, which is every Phosphor icon (family class first,
 * `ph` or `ph-<weight>`), and nothing else — an attribute *contains* match would also
 * hit an unrelated class like `graph-line`.
 *
 * NOTE: the theme's icon SIZE rules are `.fa`-keyed too, so the "Icon size" option
 * does not reach one of our icons. Wiring it up would change the current default size, so
 * it is left alone on purpose.
 */

:root {
	--pls-builder-icon-gap: 0.45em;
}

/* Tabs + Accordion: leading icon. */
body:not(.rtl) .nav-tabs > li > a .icon-tab i[class^="ph"].icon-position-left,
body:not(.rtl) .panel-title > a i[class^="ph"].icon-position-left,
body.rtl .nav-tabs > li > a .icon-tab i[class^="ph"].icon-position-right,
body.rtl .panel-title > a i[class^="ph"].icon-position-right {
	margin: 0 var(--pls-builder-icon-gap, 0.45em) 0 0;
}

/* Tabs + Accordion: trailing icon. */
body.rtl .nav-tabs > li > a .icon-tab i[class^="ph"].icon-position-left,
body.rtl .panel-title > a i[class^="ph"].icon-position-left,
body:not(.rtl) .nav-tabs > li > a .icon-tab i[class^="ph"].icon-position-right,
body:not(.rtl) .panel-title > a i[class^="ph"].icon-position-right {
	margin: 0 0 0 var(--pls-builder-icon-gap, 0.45em);
}

/* Above the label: centred, with the theme's own 0.5em breathing space. */
.nav-tabs > li > a .icon-tab i[class^="ph"].icon-position-above,
.panel-title > a i[class^="ph"].icon-position-above {
	margin: 0 0 0.5em;
	justify-content: center;
	width: 100%;
}

/* Buttons. The theme keys its own spacing on `.fa` inside these wrappers. */
body:not(.rtl) .btn-icon-left i[class^="ph"],
body.rtl .btn-icon-right i[class^="ph"] {
	margin-right: var(--pls-builder-icon-gap, 0.45em);
}

body.rtl .btn-icon-left i[class^="ph"],
body:not(.rtl) .btn-icon-right i[class^="ph"] {
	margin-left: var(--pls-builder-icon-gap, 0.45em);
}