/**
 * Open Swatches for Woo.
 *
 * Colours and corner radius come from the settings, as CSS variables.
 * The chosen button is filled with the button colour; the others show only
 * a border, in the colour of the buttons not chosen. No !important.
 */

/* ------------------------------------------------------------------------
 * Buttons (product page and cards)
 * ------------------------------------------------------------------------ */
.oswfw-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* The real radio stays for keyboards and screen readers, out of sight. */
.oswfw-group .oswfw-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.oswfw-group .oswfw-option.oswfw-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.25em;
	margin: 0;
	padding: 0.3em 0.8em;
	border: 1px solid var(--oswfw-idle, #3d3d3d);
	border-radius: var(--oswfw-radius, 8px);
	background: transparent;
	color: var(--oswfw-idle, #3d3d3d);
	font-size: 0.9em;
	font-weight: inherit;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.oswfw-group .oswfw-input:not(:checked) + .oswfw-option.oswfw-option:hover {
	box-shadow: inset 0 0 0 1px var(--oswfw-idle, #3d3d3d);
}

.oswfw-group .oswfw-input:checked + .oswfw-option.oswfw-option {
	border-color: var(--oswfw-color, #3d3d3d);
	background: var(--oswfw-color, #3d3d3d);
	color: var(--oswfw-text, #fff);
}

.oswfw-group .oswfw-input:focus-visible + .oswfw-option.oswfw-option {
	outline: 2px solid var(--oswfw-color, #3d3d3d);
	outline-offset: 2px;
}

/* Not possible with the other choices: still selectable (it starts again from it). */
.oswfw-group .oswfw-option.oswfw-unavailable {
	opacity: 0.35;
}

/* Out of stock. */
.oswfw-group .oswfw-option.oswfw-out {
	opacity: 0.55;
}

.oswfw-group .oswfw-option.oswfw-out .oswfw-text {
	text-decoration: line-through;
}

/* ------------------------------------------------------------------------
 * Product cards
 * ------------------------------------------------------------------------ */
.oswfw-form {
	margin: 0.4em 0 0.6em;
}

.oswfw-form .oswfw-group:last-child {
	margin-bottom: 0;
}

.oswfw-form .oswfw-legend {
	margin: 0 0.25em 0 0;
	font-size: 0.85em;
}

.oswfw-form.oswfw-label-above .oswfw-legend {
	flex-basis: 100%;
}

.oswfw-form.oswfw-label-hidden .oswfw-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.oswfw-form .oswfw-select {
	max-width: 100%;
	font-size: 0.9em;
}

/* ------------------------------------------------------------------------
 * Product page
 * ------------------------------------------------------------------------ */
.oswfw-single .oswfw-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* WooCommerce's select keeps working, out of sight. */
.oswfw-single .oswfw-native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.oswfw-single .oswfw-group {
	margin-bottom: 0;
}

/* Themes style the labels of the variation form (for example in bold). */
.variations_form .variations .oswfw-group .oswfw-option.oswfw-option {
	font-weight: 400;
}

/* Label beside the buttons: the label takes only its own width (the buttons
 * are narrower than WooCommerce's select, so the table would share the width
 * half and half and leave the buttons far from their label). */
.oswfw-single-label-default .variations_form table.variations th.label {
	width: 1%;
	white-space: nowrap;
}

/* Label above the buttons. */
.oswfw-single-label-above .variations_form table.variations tr,
.oswfw-single-label-above .variations_form table.variations th.label,
.oswfw-single-label-above .variations_form table.variations td.value {
	display: block;
	width: auto;
}

.oswfw-single-label-above .variations_form table.variations th.label {
	padding-bottom: 0.25em;
}

/* Label hidden (still read by screen readers). */
.oswfw-single-label-hidden .variations_form table.variations th.label,
.oswfw-accordion-on .variations_form table.variations th.label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.oswfw-single-label-hidden .variations_form table.variations td.value,
.oswfw-accordion-on .variations_form table.variations td.value {
	display: block;
}

/* Accordion mode. */
.oswfw-accordion {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.oswfw-accordion > summary {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 0;
	cursor: pointer;
	list-style: none;
}

.oswfw-accordion > summary::-webkit-details-marker {
	display: none;
}

.oswfw-accordion > summary::after {
	content: "+";
	margin-left: auto;
	font-size: 1.2em;
	line-height: 1;
}

.oswfw-accordion[open] > summary::after {
	content: "\2212";
}

.oswfw-accordion-label {
	font-weight: 600;
}

.oswfw-accordion-value {
	opacity: 0.75;
}

.oswfw-accordion > .oswfw-single,
.oswfw-accordion > select {
	margin-bottom: 0.75em;
}

@media (prefers-reduced-motion: reduce) {
	.oswfw-group .oswfw-option.oswfw-option {
		transition: none;
	}
}