/**
 * WooBricks — Add to Cart Builder: Variation Fields
 *
 * Structural CSS behind the element's controls: the Layout modifiers turn the
 * native <table class="variations"> into flex rows (WC's JS only needs the
 * selects — the table layout is free to change), the unavailable-option
 * modifiers style/hide li.disabled swatches, and th.label's own ":" (via
 * label::after) plus flex "gap" space out the label and the selected-value
 * span. Cosmetic values (colors, gaps) come from the Bricks controls.
 */

/* ---------- Layout: stacked (label above) / inline (label beside) ---------- */

.wbxe-atc-vf--stacked table.variations,
.wbxe-atc-vf--inline table.variations {
	display: block;
	width:   100%;
	border-collapse: collapse;
}

.wbxe-atc-vf--stacked table.variations tbody,
.wbxe-atc-vf--inline table.variations tbody {
	display:        flex;
	flex-direction: column;
	row-gap:        16px;
}

.wbxe-atc-vf--stacked table.variations tr,
.wbxe-atc-vf--inline table.variations tr {
	display: flex;
	gap:     var(--wbxe-vf-label-gap, 6px);
	border:  none; /* reset — a <tr> is a real painted box once flexed, so any
	                   inherited table border (theme/global stylesheet) that
	                   was invisible under native display:table-row suddenly
	                   renders; the "Row border" control is the only intended
	                   source of a border here. */
}

.wbxe-atc-vf--stacked table.variations tr {
	flex-direction: column;
	align-items:    stretch;
}

.wbxe-atc-vf--inline table.variations tr {
	align-items: center;
	gap:         var(--wbxe-vf-label-gap, 12px);
}

/* th.label holds two direct children: the native <label> and our appended
 * .wbxe-atc-vf__value span. display:flex forces BOTH onto one row regardless
 * of the label's own computed display (flex blockifies children into flex
 * items laid out along the row axis) — this is what keeps "Size: M" on a
 * single line instead of wrapping, even if the theme's own CSS resets
 * <label> to display:block. */
.wbxe-atc-vf--stacked table.variations th.label,
.wbxe-atc-vf--inline table.variations th.label {
	display:     flex;
	align-items: baseline;
	flex-wrap:   wrap;
	padding:     0;
	text-align:  left;
	gap:         4px; /* space between label(+colon) and the value span — only
	                      visible once there IS a second flex item (the value),
	                      so it's harmless when "Show selected value" is off.
	                      Overridable via the "Value gap" control. */
}

.wbxe-atc-vf--stacked table.variations td.value,
.wbxe-atc-vf--inline table.variations td.value {
	display:    block;
	padding:    0;
	text-align: left;
}

.wbxe-atc-vf--inline table.variations th.label {
	flex-shrink: 0;
}

.wbxe-atc-vf--stacked table.variations td.value,
.wbxe-atc-vf--inline table.variations td.value {
	flex-grow: 1;
}

/* ---------- Unavailable options (synced by atc-swatches.js) ----------
 * li.disabled       = impossible combination (mirrors WC's own <option disabled>)
 * li.wbxe-swatch-oos = possible combination whose variation has zero stock — WC
 *                      deliberately leaves that <option> enabled (so the shopper
 *                      can still pick it and see "Out of stock"), so we detect and
 *                      flag it ourselves. Both get the same "Unavailable options"
 *                      treatment below; only .disabled blocks clicking.
 */

/* The cross overlay is a real child element (.wbxe-swatch-cross, injected by
 * atc-swatches.js), NOT an ::after — the balloon tooltip library owns
 * li[data-balloon]::before/::after with !important, so a pseudo-element cross
 * gets hijacked (shifted off the swatch, hidden). Hidden by default; only the
 * "Crossed out" mode reveals it, and only on unavailable swatches. */
.wbxe-swatch-cross {
	display:        none;
	position:       absolute;
	inset:          0;
	pointer-events: none;
	border-radius:  inherit;
}

/* Crossed out: keep the swatch fully visible, draw a diagonal line over it. */
.wbxe-atc-vf--disabled-cross .bricks-variation-swatches li {
	position: relative;
}

.wbxe-atc-vf--disabled-cross .bricks-variation-swatches li.disabled,
.wbxe-atc-vf--disabled-cross .bricks-variation-swatches li.wbxe-swatch-oos {
	opacity: 1;
}

.wbxe-atc-vf--disabled-cross .bricks-variation-swatches li.disabled .wbxe-swatch-cross,
.wbxe-atc-vf--disabled-cross .bricks-variation-swatches li.wbxe-swatch-oos .wbxe-swatch-cross {
	display:    block;
	background: linear-gradient(
		to top right,
		transparent                   calc(50% - 1px),
		var(--wbxe-vf-cross, #cc2b2b) calc(50% - 1px),
		var(--wbxe-vf-cross, #cc2b2b) calc(50% + 1px),
		transparent                   calc(50% + 1px)
	);
}

/* Hidden: remove unavailable swatches entirely. */
.wbxe-atc-vf--disabled-hide .bricks-variation-swatches li.disabled,
.wbxe-atc-vf--disabled-hide .bricks-variation-swatches li.wbxe-swatch-oos {
	display: none;
}

/* ---------- Selected value next to the label ---------- */

/* The ":" lives on the LABEL, not the value — it's part of the label unit
 * ("Color:"), so it automatically inherits whatever font the "Label
 * typography" control sets (weight, color, family…) with zero extra CSS,
 * instead of needing its own manual weight reset kept in sync by hand.
 * :has() only fires the colon once the sibling value span is actually
 * populated (JS fills it after WC matches a variation) — avoids a dangling
 * "Color:" before any option is picked. */
/* :not(.wbxe-atc-vf--no-separator) on the root — rather than a second rule
 * fighting this one for specificity — is what actually lets "Hide separator"
 * turn the colon off: a second same-shape rule scoped only by the modifier
 * class is LESS specific than this one (this rule already carries both a
 * class AND an attribute selector on the root), so it would never win the
 * cascade regardless of source order. Excluding the state here instead means
 * there's nothing to override. */
.wbxe-atc-variation-fields[data-wbxe-show-value]:not(.wbxe-atc-vf--no-separator) table.variations th.label label:has( + .wbxe-atc-vf__value:not(:empty) )::after {
	content: ':'; /* spacing to the value comes from th.label's flex "gap", not from this content string — works the same whether or not this colon is shown */
}

.wbxe-atc-vf__value {
	font-weight: 700; /* label stays whatever weight "Label typography" sets; only the value text is bold, per design */
}