/*
 * Colour swatches: the photographs that replace WooCommerce's colour dropdown.
 *
 * Its own file, and not part of branding.css, for a reason that cost a real bug. branding.css is
 * enqueued only on products that offer decoration, because that is the only place the configurator
 * appears. Swatches are offered on every Barron variable product that has per-colour photography,
 * decoration or not -- so while these rules lived in branding.css, 56 of 253 products in a test
 * store rendered a bare fieldset, four full-width garment photographs stacked down the page, and
 * the dropdown they were supposed to replace still showing beside them.
 *
 * The rule this file exists to enforce: an asset is enqueued by the feature that needs it, so the
 * two cannot drift apart. Loaded by Media_Manager::enqueue_variation_images(), beside the script
 * that renders this markup.
 *
 * Theme-neutral, like the rest of the plugin's CSS: it borrows the theme's own focus ring, inherits
 * its typography, and every colour it sets is a custom property a merchant can override.
 */

.barron-swatches {
	--barron-swatch-size: 68px;
	--barron-swatch-border: rgba( 0, 0, 0, 0.14 );
	--barron-swatch-selected: currentColor;

	/* 9.3:1 on white. The colour name is the only non-visual cue here -- a shopper who cannot
	   tell Navy from Black by the photograph is reading this label, not looking at it -- so it is
	   set well past the 4.5:1 minimum rather than at it. */
	--barron-swatch-muted: rgba( 0, 0, 0, 0.72 );

	border: 0;
	margin: 0 0 1.1rem;
	min-width: 0;
	padding: 0;
}

@media ( prefers-color-scheme: dark ) {

	.barron-swatches {
		--barron-swatch-border: rgba( 255, 255, 255, 0.24 );
		--barron-swatch-muted: rgba( 255, 255, 255, 0.82 );
	}
}

.barron-swatches__legend {
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.45rem;
	padding: 0;
}

.barron-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.barron-swatch {
	cursor: pointer;
	display: block;
	line-height: 1;
	margin: 0;
	position: relative;
	width: var( --barron-swatch-size );
}

/* The radio is the control; it is positioned under the image rather than display:none, because a
   display:none input is skipped by some screen readers and cannot receive focus. */
.barron-swatch__radio {
	height: 1px;
	margin: 0;
	opacity: 0;
	position: absolute;
	pointer-events: none;
	width: 1px;
}

.barron-swatch__image {
	align-items: center;
	background: rgba( 0, 0, 0, 0.02 );
	border: 1px solid var( --barron-swatch-border );
	border-radius: 6px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	overflow: hidden;
	transition: border-color 180ms cubic-bezier( .2, .7, .2, 1 ),
		box-shadow 180ms cubic-bezier( .2, .7, .2, 1 );
}

.barron-swatch__image img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.barron-swatch__name {
	display: block;
	font-size: 0.75rem;
	line-height: 1.3;
	margin-top: 0.3rem;
	overflow: hidden;
	color: var( --barron-swatch-muted );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.barron-swatch:hover .barron-swatch__image {
	border-color: var( --barron-swatch-selected );
}

.barron-swatch__radio:checked + .barron-swatch__image {
	border-color: var( --barron-swatch-selected );
	box-shadow: inset 0 0 0 2px var( --barron-swatch-selected );
}

.barron-swatch__radio:checked ~ .barron-swatch__name {
	color: inherit;
	font-weight: 600;
}

/* The focus ring goes on the image, since the input itself is not visible. */
.barron-swatch__radio:focus-visible + .barron-swatch__image {
	outline: 2px solid var( --barron-swatch-selected );
	outline-offset: 2px;
}

/* Inside the legend, so the heading reads "Colour: True Red". The separator is drawn here rather
   than written into the text, because a screen reader announcing this region should hear the colour
   name and not punctuation. */
.barron-swatches__chosen {
	color: var( --barron-swatch-muted );
	font-weight: 400;
}

.barron-swatches__chosen::before {
	content: ": ";
}

/* The dropdown the swatches replaced. Hidden rather than dimmed: leaving it visible put two
   controls labelled "Colour" on one page, one of which did nothing when clicked. It stays in the
   DOM because it is WooCommerce's source of truth and anything else reading the page still finds
   it; display:none does not stop a script reading a select's value. */
.barron-swatches-replaced {
	/* !important, deliberately. WooCommerce lays the variation controls out as a table, and a theme
	   that regrids them -- `table.variations tr { display: contents }` is the usual trick -- writes
	   a two-class selector that outranks anything reasonable here. The plugin has replaced this
	   control with the swatch group above it; a theme's layout rule must not put it back, or the
	   page shows two controls labelled "Colour" and only one of them does anything. */
	display: none !important;
}

@media ( prefers-reduced-motion: reduce ) {

	.barron-swatch__image {
		transition: none;
	}
}