/**
 * Colour variants on a variable product.
 *
 * WooCommerce paints the swatch as a background on
 * .wc-block-product-filter-chips__swatch and keeps the term name beside it.
 * Both modes here drop the name: the colour or the garment carries it, and
 * the button keeps its aria-label and title, so nothing is lost to assistive
 * technology or to a hover.
 *
 * Core's own rules are written with :where(), so they carry no specificity
 * and a plain class is enough to override them.
 */

/* WooCommerce hides the label on every chip inside .is-style-swatch, whether
   or not that chip ended up with a visual. A colour with no variation image
   would then be an unlabelled empty box, so its label is put back and the
   blank swatch removed — it reads as an ordinary text chip again. */
.maksimer-color-variants .wc-block-product-filter-chips__item:has(.wc-block-product-filter-chips__swatch--no-color) .wc-block-product-filter-chips__text {
	clip: auto;
	clip-path: none;
	display: inline;
	height: auto;
	overflow: visible;
	position: static;
	white-space: normal;
	width: auto;
}

.maksimer-color-variants .wc-block-product-filter-chips__swatch--no-color {
	display: none;
}

/* The block sits in a vertical group that lets its children size to their
   own content, so a long row of tiles makes this wider than the column it
   is in and the whole page ends up scrolling sideways. Clamped to the
   parent's width, the overflow lands on the tile row below, where it can be
   scrolled on its own. */
.maksimer-color-variants {
	min-width: 0;
	max-width: 100%;
}

.maksimer-color-variants .wc-block-product-filter-chips__items {
	gap: 8px 10px;
}

.maksimer-color-variants .wc-block-product-filter-chips__item {
	border: 0;
	padding: 0;
	background: none;
}

.maksimer-color-variants .wc-block-product-filter-chips__item:has(.wc-block-product-filter-chips__swatch--no-color) {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--theme-border);
	border-radius: var(--wp--custom--form-field-border-radius);
	padding: 0.4em 0.75em;
}

/* Same treatment for a chip that fell back to text: the border it already
   has changes colour, so selection reads the same way in both forms. */
.maksimer-color-variants .wc-block-product-filter-chips__item[aria-checked="true"]:has(.wc-block-product-filter-chips__swatch--no-color) {
	border-color: var(--wp--preset--color--contrast);

	/* A step heavier (500) than the unselected ones, as the size boxes. */
	font-weight: 500;
}

.maksimer-color-variants .wc-block-product-filter-chips__swatch {
	box-sizing: border-box;
}

/* The selected option recolours the border it already has rather than adding
   a ring outside it: one outline, and the swatch keeps its size, so the row
   does not shift when the choice changes. */
.maksimer-color-variants .wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__swatch {
	border-color: var(--wp--preset--color--contrast);

	/* A second pixel inside the border, so the selected one reads as 2px without
	   the tile growing. */
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

/* Hovering previews the marking selection uses, so the whole tile reads as
   the target rather than only the cursor changing. Not on a disabled option,
   which cannot be chosen. */
.maksimer-color-variants .wc-block-product-filter-chips__item:hover:not(:disabled) .wc-block-product-filter-chips__swatch,
.maksimer-color-variants .wc-block-product-filter-chips__item:hover:not(:disabled):has(.wc-block-product-filter-chips__swatch--no-color) {
	border-color: var(--wp--preset--color--contrast);
}

.maksimer-color-variants .wc-block-product-filter-chips__item:disabled {
	cursor: default;
	opacity: 0.4;
}

/* Swatch: the round dot core already draws, slightly larger. */
.maksimer-color-variants--swatch .wc-block-product-filter-chips__swatch {
	width: 28px;
	height: 28px;
	border: 1px solid var(--wp--preset--color--theme-border);
	border-radius: 50%;
}

/* Variant image: a rectangular thumbnail of the garment in that colour,
   matching the product card's portrait ratio. */
.maksimer-color-variants--image {
	--maksimer-tile-width: 76px;
	--maksimer-tile-height: 90px;
	--maksimer-tile-padding: 3px;
}

.maksimer-color-variants--image .wc-block-product-filter-chips__swatch {
	width: var(--maksimer-tile-width);
	height: var(--maksimer-tile-height);
	border: 1px solid var(--wp--preset--color--theme-border);
	border-radius: var(--wp--custom--form-field-border-radius);

	/* No palette token covers this neutral: the theme's surfaces are warm,
	   and the tile needs to read as a plain ground behind a cut-out garment.
	   Same reasoning as the bundle panel in ymir. */
	background-color: #f5f5f5;

	/* The image is painted inside the padding rather than across the whole
	   box, so the garment sits on a margin of that ground instead of running
	   into the border. */
	padding: var(--maksimer-tile-padding);
	background-origin: content-box;
	background-size: cover;
}

/* The chosen tile also gets a small black check in its top right corner, inside the
   frame (outside, it would be cut off where the row scrolls sideways on a phone). */
.maksimer-color-variants--image .wc-block-product-filter-chips__swatch {
	position: relative;
}

.maksimer-color-variants--image .wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__swatch::after {
	content: "\2713";
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	line-height: 1;
}

/* Not available: dimmed (the rule above) and a line across, so it does not read as
   merely lighter. */
.maksimer-color-variants--image .wc-block-product-filter-chips__item:disabled .wc-block-product-filter-chips__swatch::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	left: 6px;
	border-top: 1px solid var(--wp--preset--color--contrast);
	transform: rotate(-30deg);
}

/* The picture fills the tile to the border with a thin margin of the ground (2px)
   instead of 6px, so the garment is not lost in a wide frame. */

/* A colour with no image falls back to its label, and takes the tile's
   measurements so the row stays an even grid rather than one short box
   among the garments. */
.maksimer-color-variants--image .wc-block-product-filter-chips__item:has(.wc-block-product-filter-chips__swatch--no-color) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--maksimer-tile-width);
	height: var(--maksimer-tile-height);
	padding: var(--maksimer-tile-padding);
	border-radius: var(--wp--custom--form-field-border-radius);
	text-align: center;
	overflow-wrap: anywhere;
}

/* On a phone the tiles no longer fit on one line, and wrapping them into a
   second row pushes the add-to-cart section further down. They scroll
   sideways instead, so the row keeps its height however many colours a
   product has. 600px is the breakpoint the bundle styles already use. */
@media (max-width: 600px) {

	.maksimer-color-variants .wc-block-product-filter-chips__items {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	/* The tiles are the scroll content, so they must not be squeezed to fit
	   the container they are meant to overflow. */
	.maksimer-color-variants .wc-block-product-filter-chips__item {
		flex: 0 0 auto;
	}
}