/**
 * MagicLabs WC Manager — Variation Swatches.
 * Sizes and the tick/cross colours come from inline custom properties set by
 * the module settings; the values below are the fallbacks.
 */

.mlwm-swatches {
	--mlwm-swatch-width: 30px;
	--mlwm-swatch-height: 30px;
	--mlwm-swatch-font-size: 16px;
	--mlwm-swatch-tick: #ffffff;
	--mlwm-swatch-cross: #ff0000;

	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0;
	padding: 0;
}

.mlwm-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--mlwm-swatch-width);
	height: var(--mlwm-swatch-height);
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: var(--mlwm-swatch-font-size);
	line-height: 1;
	color: inherit;
	background: none;
	border: 2px solid #d6d6d6;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease-in-out;
}

.mlwm-swatches--rounded .mlwm-swatch {
	border-radius: 50%;
}

.mlwm-swatch:hover,
.mlwm-swatch:focus-visible {
	border-color: #888;
	outline: none;
}

.mlwm-swatch.is-selected {
	border-color: #111;
}

/* Colour swatches ------------------------------------------------------- */

.mlwm-swatch--color {
	width: var(--mlwm-swatch-width);
	padding: 2px;
}

.mlwm-swatch__color {
	display: block;
	width: 100%;
	height: 100%;
}

.mlwm-swatches--rounded .mlwm-swatch__color {
	border-radius: 50%;
}

/* Tick on the selected colour/image swatch. */
.mlwm-swatch--color.is-selected::after,
.mlwm-swatch--image.is-selected::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26%;
	height: 48%;
	content: "";
	border: solid var(--mlwm-swatch-tick);
	border-width: 0 2px 2px 0;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
	transform: translate(-50%, -62%) rotate(45deg);
	pointer-events: none;
}

/* Image swatches -------------------------------------------------------- */

.mlwm-swatch--image {
	width: var(--mlwm-swatch-width);
}

.mlwm-swatch__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Button / label swatches ----------------------------------------------- */

.mlwm-swatch--button,
.mlwm-swatch--fallback {
	width: auto;
	padding: 0 12px;
	white-space: nowrap;
	background: #fff;
}

.mlwm-swatch--button.is-selected,
.mlwm-swatch--fallback.is-selected {
	background: #fff;
	border-color: #111;
}

.mlwm-swatch__label {
	pointer-events: none;
}

/* Unavailable combinations ---------------------------------------------- */

.mlwm-swatches--disabled-blur .mlwm-swatch.is-disabled,
.mlwm-swatches--disabled-blur-cross .mlwm-swatch.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.mlwm-swatches--disabled-hide .mlwm-swatch.is-disabled {
	display: none;
}

/* Corner-to-corner line, clipped to the swatch box by overflow: hidden. */
.mlwm-swatches--disabled-blur-cross .mlwm-swatch.is-disabled::before {
	position: absolute;
	top: 50%;
	left: -20%;
	width: 140%;
	height: 2px;
	margin-top: -1px;
	content: "";
	background: var(--mlwm-swatch-cross);
	transform: rotate(-45deg);
	pointer-events: none;
}

/* A disabled swatch must never also draw the "selected" tick. */
.mlwm-swatch.is-disabled::after {
	content: none;
}