/**
 * WooBricks — Add to Cart Builder variation swatches
 *
 * Bricks styles its variation swatches ONLY under its native element
 * (`:where(.brxe-product-add-to-cart) .bricks-variation-swatches`), so our
 * composed Variation Fields — which borrows Bricks' swatch RENDERER but lives in
 * a different wrapper — gets unstyled <li>s. We can't reuse the native class
 * (`.brxe-product-add-to-cart`) without Bricks' own swatch JS also binding to our
 * swatches (double handling), so we mirror the small layout ruleset here, scoped
 * to our element. Colours/sizes stay overridable; this is layout only.
 */

.wbxe-atc-variation-fields .bricks-variation-swatches {
	all:        unset;
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
	list-style: none;
}

.wbxe-atc-variation-fields .bricks-variation-swatches li {
	border:     1px solid #999;
	cursor:     pointer;
	transition: all 0.05s linear;
}

.wbxe-atc-variation-fields .bricks-variation-swatches li.bricks-swatch-selected {
	border-color: #000;
}

.wbxe-atc-variation-fields .bricks-variation-swatches li.disabled {
	cursor:  not-allowed;
	opacity: 0.5;
}

/* Color swatches */
.wbxe-atc-variation-fields .bricks-variation-swatches.bricks-swatch-color {
	align-items: center;
	display:     flex;
}

.wbxe-atc-variation-fields .bricks-variation-swatches.bricks-swatch-color li {
	width:   32px;
	height:  32px;
	padding: 1px;
}

.wbxe-atc-variation-fields .bricks-variation-swatches.bricks-swatch-color li div {
	width:         100%;
	height:        100%;
	border-radius: inherit;
}

/* Label swatches.
   Centred on both axes so the Width/Height controls produce even boxes: a
   plain list item would leave "S" hugging the top-left corner of a 3rem
   square. With no size set this changes nothing — the swatch is still as wide
   as its text plus padding. */
.wbxe-atc-variation-fields .bricks-variation-swatches.bricks-swatch-label li {
	padding:         0 10px;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

/* Image swatches */
.wbxe-atc-variation-fields .bricks-variation-swatches.bricks-swatch-image li {
	padding: 1px;
}

/*
 * Height is `auto` + aspect-ratio rather than a fixed 32px so the attribute's
 * swatch image size can shape the swatch (see Attribute_Swatches). Without the
 * ratio this still draws Bricks' 32px square, because the width below sets
 * both sides — that default has to be repeated here, since the native rule is
 * scoped to `.brxe-product-add-to-cart` and never reaches our element.
 */
.wbxe-atc-variation-fields .bricks-variation-swatches.bricks-swatch-image li img {
	width:         32px;
	height:        auto;
	aspect-ratio:  var( --wbxe-swatch-ratio, 1 );
	object-fit:    cover;
	border-radius: inherit;
}