/*
 * Swatchline on the product page: colour, image and label swatches next to WooCommerce's (hidden)
 * attribute dropdowns. WooCommerce has no markup for swatches, so this styles the radio group
 * Swatchline draws; it takes the theme's text colour and font. The size comes from the settings as
 * --swatchline-size.
 *
 * Table of contents
 *   1. Hidden dropdowns
 *   2. The group
 *   3. Colour and image swatches
 *   4. Label swatches
 *   5. Chosen, focus and hover
 *   6. Unavailable swatches
 *   7. Tooltips
 *   8. Chosen value after the attribute name
 */

/* ==========================================================================
   1. Hidden dropdowns
   ========================================================================== */

/* WooCommerce's dropdown stays in the form (its scripts read it) but isn't shown. */
.swatchline-hidden-control {
	display: none !important;
}

/* End 1. Hidden dropdowns */

/* ==========================================================================
   2. The group
   ========================================================================== */

.swatchline-swatches {
	--swatchline-size: 36px;
	--swatchline-ring: currentColor;
	--swatchline-line: rgba(0, 0, 0, 0.18);
	--swatchline-tip-bg: #1e1e1e;
	--swatchline-tip-fg: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 4px 0 12px;
	padding: 0;
	line-height: 1.2;
}

.swatchline-swatch {
	position: relative;
	display: inline-flex;
	margin: 0;
}

/* The radio button stays focusable and readable by screen readers; its label is what's seen. */
.swatchline-swatches .swatchline-swatch__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.swatchline-swatches .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.swatchline-swatches .swatchline-swatch__label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2px;
	border: 2px solid transparent;
	font-weight: inherit;
	cursor: pointer;
	user-select: none;
}

/* End 2. The group */

/* ==========================================================================
   3. Colour and image swatches
   ========================================================================== */

.swatchline-swatch__chip {
	display: block;
	width: var(--swatchline-size);
	height: var(--swatchline-size);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--swatchline-line);
	background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 4px, transparent 4px 8px);
}

.swatchline-swatch__svg,
.swatchline-swatches .swatchline-swatch__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* The chip's own edge over the colour, so white and pale swatches show their outline. */
.swatchline-swatch__chip {
	position: relative;
}

.swatchline-swatch__chip::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--swatchline-line);
}

.swatchline-shape-circle .swatchline-swatch__label,
.swatchline-shape-circle .swatchline-swatch__chip {
	border-radius: 50%;
}

.swatchline-shape-rounded .swatchline-swatch__label {
	border-radius: 8px;
}

.swatchline-shape-rounded .swatchline-swatch__chip {
	border-radius: 5px;
}

.swatchline-shape-square .swatchline-swatch__label,
.swatchline-shape-square .swatchline-swatch__chip {
	border-radius: 0;
}

/* End 3. Colour and image swatches */

/* ==========================================================================
   4. Label swatches
   ========================================================================== */

/* As tall as colour and image swatches (size + their padding and border), so every row lines up. */
.swatchline-swatches--label .swatchline-swatch__label {
	box-sizing: border-box;
	min-width: calc(var(--swatchline-size) * 1.15);
	min-height: calc(var(--swatchline-size) + 8px);
	padding: 0 0.85em;
	border: 1px solid var(--swatchline-line);
	border-radius: 4px;
	font-size: 0.9em;
	text-align: center;
}

.swatchline-shape-circle.swatchline-swatches--label .swatchline-swatch__label {
	border-radius: 999px;
}

.swatchline-shape-square.swatchline-swatches--label .swatchline-swatch__label {
	border-radius: 0;
}

/* End 4. Label swatches */

/* ==========================================================================
   5. Chosen, focus and hover
   ========================================================================== */

.swatchline-swatch__label:hover {
	border-color: var(--swatchline-line);
}

.swatchline-swatches--label .swatchline-swatch__label:hover {
	border-color: currentColor;
}

.swatchline-swatch__input:checked + .swatchline-swatch__label {
	border-color: var(--swatchline-ring);
}

.swatchline-swatches--label .swatchline-swatch__input:checked + .swatchline-swatch__label {
	box-shadow: inset 0 0 0 1px var(--swatchline-ring);
}

.swatchline-label-filled.swatchline-swatches--label .swatchline-swatch__input:checked + .swatchline-swatch__label {
	border-color: var(--swatchline-tip-bg);
	background: var(--swatchline-tip-bg);
	color: var(--swatchline-tip-fg);
	box-shadow: none;
}

.swatchline-swatch__input:focus-visible + .swatchline-swatch__label {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* End 5. Chosen, focus and hover */

/* ==========================================================================
   6. Unavailable swatches
   ========================================================================== */

/* Out of stock, or no variation with the other choices: dimmed and crossed out. */
.swatchline-swatch.is-out-of-stock .swatchline-swatch__label,
.swatchline-swatch.is-unavailable .swatchline-swatch__label {
	cursor: not-allowed;
}

.swatchline-swatch.is-out-of-stock .swatchline-swatch__chip,
.swatchline-swatch.is-unavailable .swatchline-swatch__chip,
.swatchline-swatch.is-out-of-stock .swatchline-swatch__name,
.swatchline-swatch.is-unavailable .swatchline-swatch__name {
	opacity: 0.4;
}

.swatchline-swatch.is-out-of-stock .swatchline-swatch__label::after,
.swatchline-swatch.is-unavailable .swatchline-swatch__label::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
	opacity: 0.55;
	pointer-events: none;
}

.swatchline-swatches--label .swatchline-swatch.is-out-of-stock .swatchline-swatch__name,
.swatchline-swatches--label .swatchline-swatch.is-unavailable .swatchline-swatch__name {
	text-decoration: line-through;
}

.swatchline-swatches--label .swatchline-swatch.is-out-of-stock .swatchline-swatch__label::after,
.swatchline-swatches--label .swatchline-swatch.is-unavailable .swatchline-swatch__label::after {
	display: none;
}

/* End 6. Unavailable swatches */

/* ==========================================================================
   7. Tooltips
   ========================================================================== */

.swatchline-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 30;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	padding: 0.35em 0.6em;
	border-radius: 4px;
	background: var(--swatchline-tip-bg);
	color: var(--swatchline-tip-fg);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

.swatchline-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 5px solid transparent;
	border-top-color: var(--swatchline-tip-bg);
	transform: translateX(-50%);
}

.swatchline-swatch:hover .swatchline-tooltip,
.swatchline-swatch__input:focus-visible + .swatchline-swatch__label .swatchline-tooltip {
	display: flex;
}

/* A label swatch shows its name already: its tooltip only says why it can't be chosen. */
.swatchline-swatches--label .swatchline-swatch:not(.is-out-of-stock):not(.is-unavailable) .swatchline-tooltip {
	display: none;
}

.swatchline-swatches--label .swatchline-tooltip__name {
	display: none;
}

.swatchline-swatches .swatchline-tooltip__image {
	display: block;
	width: 120px;
	height: 120px;
	max-width: none;
	margin: 0.15em 0 0;
	border-radius: 3px;
	object-fit: cover;
}

.swatchline-tooltip__status:empty {
	display: none;
}

.swatchline-tooltip__status {
	font-size: 0.9em;
	opacity: 0.8;
}

/* End 7. Tooltips */

/* ==========================================================================
   8. Chosen value after the attribute name
   ========================================================================== */

.swatchline-selected {
	font-weight: 400;
}

/*
 * The classic variations table centres its label cell on the whole row (swatches, wrapped rows and
 * the Clear link): put the label level with the first row of swatches instead. Every swatch is
 * size + 8px tall, below a 4px margin. Only when the label sits beside the swatches (the script marks
 * the row): themes such as Storefront put it above them. (WooCommerce's own rule for these cells is
 * specific, hence the long selectors.)
 */
form.variations_form table.variations tr:has(.swatchline-swatches.swatchline-swatches--product) > th.label,
form.variations_form table.variations tr:has(.swatchline-swatches.swatchline-swatches--product) > td.value {
	vertical-align: top;
}

form.variations_form table.variations tr.swatchline-side-by-side > th.label label {
	display: inline-block;
	margin-top: max(0px, calc(4px + (var(--swatchline-size, 36px) + 8px) / 2 - 0.75em));
	line-height: 1.5;
}

.swatchline-selected.has-value::before {
	content: ": ";
}

/* End 8. Chosen value after the attribute name */