/**
 * Mono frontend styles.
 */

/* ==========================================================================
 * Variation swatches (plugin «Variation Swatches for WooCommerce», GetWooPlugins)
 *
 * Text / button swatches become readable pills (auto width) instead of the
 * plugin's fixed 35×35 box; colour circles stay as they are. A colour swatch
 * whose term has no colour gets class mono_swatch--nocolor from
 * frontend-scripts.js and shows as a pill with a small neutral dot + the name.
 * Multicolour terms (term meta mono_swatch_multicolor) get the gradient from
 * inline CSS printed by MONO_Product_Color_Swatch.
 *
 * !important is used only on geometry and state where the plugin's own rules
 * (body classes + CSS variables, not editable here) would otherwise win.
 * ======================================================================= */

:root {
	--mono-swatch-ink: #1f1d1a;
	--mono-swatch-text: #3a3632;
	--mono-swatch-line: #d9d4cc;
	--mono-swatch-line-hover: #8f877c;
	--mono-swatch-bg: #ffffff;
	--mono-swatch-accent: #1f1d1a;
	--mono-swatch-selected-bg: #f4f0ea;
	--mono-swatch-muted: #a19a91;
	--mono-swatch-neutral: #b9b1a7;
	--mono-swatch-height: 34px;
	--mono-swatch-min-width: 44px;
	--mono-swatch-pad: 12px;
	--mono-swatch-font: 13px;
	--mono-swatch-multicolor: conic-gradient(from 90deg, #d64545, #e8b23a, #5aa85a, #3a7bd5, #8a4fd8, #d64545);
}

/* Pill: button swatches and colour swatches without a colour. */
.variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item),
.variable-items-wrapper .variable-item.mono_swatch--nocolor:not(.radio-variable-item) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: var(--mono-swatch-min-width) !important;
	height: var(--mono-swatch-height) !important;
	padding: 0 var(--mono-swatch-pad) !important;
	margin-block: 4px;
	margin-inline: 0 8px;
	border-radius: 999px !important;
	background-color: var(--mono-swatch-bg);
	box-shadow: 0 0 0 1px var(--mono-swatch-line) !important;
	color: var(--mono-swatch-text);
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.variable-items-wrapper .variable-item.button-variable-item .variable-item-contents,
.variable-items-wrapper .variable-item.mono_swatch--nocolor .variable-item-contents {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	height: auto;
	overflow: visible;
}

.variable-items-wrapper .variable-item.button-variable-item .variable-item-span,
.variable-items-wrapper .variable-item.mono_swatch--nocolor .mono_swatch__label {
	padding: 0 !important;
	font-size: var(--mono-swatch-font) !important;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
	color: inherit;
}

/* Colour swatch without a colour: the colour span becomes a small neutral dot. */
.variable-items-wrapper .variable-item.mono_swatch--nocolor .variable-item-span-color {
	flex: none;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background-color: var(--mono-swatch-neutral);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Hover and keyboard focus. */
.variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item):hover,
.variable-items-wrapper .variable-item.mono_swatch--nocolor:not(.radio-variable-item):hover {
	box-shadow: 0 0 0 1px var(--mono-swatch-line-hover) !important;
}

.variable-items-wrapper .variable-item:focus-visible {
	outline: 2px solid var(--mono-swatch-accent);
	outline-offset: 2px;
}

/* Selected. */
.variable-items-wrapper .variable-item.button-variable-item.selected:not(.radio-variable-item),
.variable-items-wrapper .variable-item.mono_swatch--nocolor.selected:not(.radio-variable-item) {
	background-color: var(--mono-swatch-selected-bg);
	box-shadow: 0 0 0 2px var(--mono-swatch-accent) !important;
	color: var(--mono-swatch-ink);
}

.variable-items-wrapper .variable-item.button-variable-item.selected .variable-item-span,
.variable-items-wrapper .variable-item.mono_swatch--nocolor.selected .mono_swatch__label {
	font-weight: 600;
}

/* Unavailable combination / out of stock. */
.variable-items-wrapper .variable-item.button-variable-item.disabled,
.variable-items-wrapper .variable-item.button-variable-item.out-of-stock,
.variable-items-wrapper .variable-item.mono_swatch--nocolor.disabled,
.variable-items-wrapper .variable-item.mono_swatch--nocolor.out-of-stock {
	opacity: 0.55;
	background-color: var(--mono-swatch-bg);
	box-shadow: 0 0 0 1px var(--mono-swatch-line) !important;
	color: var(--mono-swatch-muted);
	cursor: not-allowed;
}

.variable-items-wrapper .variable-item.button-variable-item.disabled .variable-item-span,
.variable-items-wrapper .variable-item.button-variable-item.out-of-stock .variable-item-span,
.variable-items-wrapper .variable-item.mono_swatch--nocolor.disabled .mono_swatch__label,
.variable-items-wrapper .variable-item.mono_swatch--nocolor.out-of-stock .mono_swatch__label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Archive / product loops: a little smaller. */
ul.products .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item),
ul.products .variable-items-wrapper .variable-item.mono_swatch--nocolor:not(.radio-variable-item),
.wvs-archive-variations-wrapper .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item),
.wvs-archive-variations-wrapper .variable-items-wrapper .variable-item.mono_swatch--nocolor:not(.radio-variable-item) {
	min-width: 36px !important;
	height: 28px !important;
	padding: 0 10px !important;
	margin-inline: 0 6px;
}

ul.products .variable-items-wrapper .variable-item.button-variable-item .variable-item-span,
ul.products .variable-items-wrapper .variable-item.mono_swatch--nocolor .mono_swatch__label,
.wvs-archive-variations-wrapper .variable-items-wrapper .variable-item.button-variable-item .variable-item-span,
.wvs-archive-variations-wrapper .variable-items-wrapper .variable-item.mono_swatch--nocolor .mono_swatch__label {
	font-size: 12px !important;
}