/**
 * Variation swatches — WooBricks layer on top of Bricks' native swatches.
 *
 * Two jobs, matching WooBricks\Attribute_Swatches:
 *   - size image swatches from the attribute's own setting instead of Bricks'
 *     fixed 32px square;
 *   - draw the "cannot be bought" state that Bricks has no concept of.
 *
 * Selectors deliberately carry one element more than Bricks' own
 * (`ul.bricks-variation-swatches…`) so they win the cascade without
 * !important: Bricks wraps its rule in :where(), which contributes nothing,
 * leaving both sides on equal specificity and load order deciding.
 */

/* --------------------------------------------------------------------------
 * Size and proportion
 * ----------------------------------------------------------------------- */

/*
 * `--wbxe-swatch-ratio` is printed on the <ul> per attribute, from the chosen
 * image size. Without it this resolves to 1, i.e. Bricks' own square, so an
 * attribute that was never given a size looks exactly as before.
 *
 * Width is deliberately absent: the Add to Cart element already owns it
 * (Swatches → Width, native and ours alike), and an attribute-wide setting has
 * no business overruling a control the author set on that element. We only
 * release the height so the proportion can apply — an author who sets Height
 * explicitly still wins, because their rule carries the element's ID.
 */
ul.bricks-variation-swatches.bricks-swatch-image li img {
	height: auto;
	aspect-ratio: var( --wbxe-swatch-ratio, 1 );
	object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Unavailable state
 * ----------------------------------------------------------------------- */

ul.bricks-variation-swatches li.wbxe-swatch-unavailable {
	position: relative;
	/*
	 * A crossed-out swatch that still responds to clicks promises something
	 * the form will refuse, so the whole item stops taking pointer events.
	 * Picking a different size brings it back.
	 */
	pointer-events: none;
}

/*
 * Fade what the swatch SHOWS — the photo of an image swatch, the colour block
 * of a colour one. Faded far enough to read as "not this one", but not so far
 * that the colour stops being recognisable: the swatch still has to answer
 * "which colour is gone?". Both this and the line colour are custom
 * properties, so a store can tune them without fighting the cascade.
 */
ul.bricks-variation-swatches li.wbxe-swatch-unavailable img,
ul.bricks-variation-swatches li.wbxe-swatch-unavailable > div {
	opacity: var( --wbxe-swatch-unavailable-opacity, 0.55 );
}

/*
 * The line is drawn on the swatch's inner element, NOT on the <li>.
 *
 * Bricks already owns both of the <li>'s pseudo-elements: `::after` carries
 * the colour-name tooltip (from data-balloon) and `::before` its arrow, so
 * drawing there silently swallows the tooltip — and the name is wanted most
 * exactly when the colour is crossed out. `> *` covers the <button> of image
 * swatches and the <div> of colour ones alike; a bare <img> child ignores it,
 * being a replaced element, which costs nothing but the fade.
 */
ul.bricks-variation-swatches li.wbxe-swatch-unavailable > * {
	position: relative;
}

ul.bricks-variation-swatches li.wbxe-swatch-unavailable > *::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	/*
	 * A single hairline corner to corner. currentColor is safe here — unlike
	 * the cart skeletons, nothing sets color:transparent on this element.
	 */
	background-image: linear-gradient(
		to top right,
		transparent calc( 50% - 0.5px ),
		var( --wbxe-swatch-unavailable-line, currentColor ) calc( 50% - 0.5px ),
		var( --wbxe-swatch-unavailable-line, currentColor ) calc( 50% + 0.5px ),
		transparent calc( 50% + 0.5px )
	);
}

/*
 * In the builder both states must stay visible and editable, the same way the
 * cart's empty/filled helpers are scoped.
 */
body.wbxe-in-builder ul.bricks-variation-swatches li.wbxe-swatch-unavailable {
	pointer-events: auto;
}