/**
 * The swatch block.
 *
 * A deliberately minimal base: enough to lay the four designs out and make them
 * usable, and no more. Everything a store owner is likely to want to restyle is a
 * class hook rather than an opinion (guide §10), so overriding this from a theme
 * stylesheet takes one selector and no !important.
 *
 * Authored with logical properties throughout, so the block reads correctly in an
 * RTL store (guide §17).
 *
 * The two border colours are settings (guide §11), and arrive as an inline
 * stylesheet that redeclares the two custom properties below. These are what a
 * store that has never touched the settings gets.
 */

.wplpo {
	--wplpo-active-border: #333333;
	--wplpo-inactive-border: #dddddd;
	--wplpo-gap: 0.5em;

	margin-block: 1em;
}

.wplpo__heading {
	display: block;
	margin-block-end: 0.5em;
	font-weight: 600;
}

.wplpo__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wplpo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Centering (guide §13): lined up from the start is the default either context gets. */
.wplpo--center .wplpo__list {
	justify-content: center;
}

.wplpo__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The anchor. Every option is a real link to a sibling's own product page — that
 * is the point of the plugin — so it stays a link, and only stops looking like one.
 */
.wplpo__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	text-decoration: none;
	border: 1px solid var(--wplpo-inactive-border);
	border-radius: 3px;
	transition: border-color 0.12s ease-in-out;
}

.wplpo__option:hover,
.wplpo__option:focus {
	text-decoration: none;
	border-color: var(--wplpo-active-border);
}

.wplpo__option.is-active {
	border-color: var(--wplpo-active-border);
	border-width: 2px;
}

.wplpo__option:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * A "not linked" out-of-stock rule (guide §13) drops the `href` rather than adding a
 * class — see the renderer. Without one the anchor is already out of the tab order,
 * but a mouse can still hover it, and the hover feedback above is a promise the click
 * would not keep. This is what withdraws that promise.
 */
.wplpo__option:not([href]) {
	cursor: default;
}

.wplpo__option:not([href]):hover,
.wplpo__option:not([href]):focus {
	border-color: var(--wplpo-inactive-border);
}

/*
 * The label as a tooltip: the colour swatch and the image square have no room for
 * one, so their label appears above the option instead of inside it.
 *
 * A visual treatment and nothing more. The option is named by its `aria-label`, so
 * this can be hidden and shown as freely as any decoration without a screen reader
 * losing track of what the option is. It is shown on focus as well as on hover, on
 * every pointer alike: a touch shopper sees the swatch or image itself and gets the
 * name as a tap-through detail, the same trade every other design already makes.
 */
.wplpo__tooltip {
	position: absolute;
	z-index: 1;
	inset-block-end: calc(100% + 6px);
	/*
	 * Centred over the option regardless of either one's width: pinning the tooltip's
	 * start edge to the option's midpoint, then pulling it back by half its own width,
	 * centres it even when the tooltip is wider than the option itself — a colour
	 * swatch circle is narrower than most colour names, so it always is. The auto-margin
	 * technique this replaced only centred while the tooltip fit inside the option's own
	 * width, and silently stopped otherwise.
	 *
	 * The translate's sign is physical, not logical, so it flips under `:dir(rtl)` below
	 * rather than doing so on its own the way the inset it replaces would have.
	 */
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: max-content;
	max-inline-size: 12em;
	padding: 0.25em 0.5em;
	color: #ffffff;
	font-size: 0.75em;
	line-height: 1.4;
	white-space: nowrap;
	background: #1e1e1e;
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.12s ease-in-out;
	pointer-events: none;
}

/* The other half of the centring above (guide §17): the physical sign, flipped. */
:dir(rtl) .wplpo__tooltip {
	translate: 50% 0;
}

.wplpo__option:hover .wplpo__tooltip,
.wplpo__option:focus .wplpo__tooltip,
.wplpo__option:focus-within .wplpo__tooltip {
	opacity: 1;
}

/*
 * Tooltip size (guide §13). The base rule above is the `medium` default; `small` and
 * `large` scale its font and padding together, so the box stays proportioned rather
 * than just the text growing inside an unchanged bubble.
 */
.wplpo--tooltip-small .wplpo__tooltip {
	max-inline-size: 10em;
	padding: 0.2em 0.4em;
	font-size: 0.65em;
}

.wplpo--tooltip-large .wplpo__tooltip {
	max-inline-size: 14em;
	padding: 0.35em 0.65em;
	font-size: 0.9em;
}

.wplpo__image {
	display: block;
	background: #f2f2f2;
	object-fit: cover;
}

/* Buttons: the label, and nothing else. */
.wplpo__option--buttons {
	padding: 0.45em 0.85em;
	line-height: 1.3;
}

/* Colour swatch: a coloured circle, with the label on hover. */
.wplpo__option--colour-swatch {
	padding: 2px;
	border-radius: 50%;
}

.wplpo__option--colour-swatch .wplpo__swatch {
	display: block;
	inline-size: 1.75em;
	block-size: 1.75em;
	background-color: #f2f2f2;
	border-radius: 50%;
}

/* Detailed image: a card — image at the inline start, label after it. */
.wplpo__option--detailed-image {
	gap: 0.6em;
	padding-block: 0.35em;
	padding-inline: 0.35em 0.75em;
	line-height: 1.3;
}

.wplpo__option--detailed-image .wplpo__image {
	inline-size: 2.75em;
	block-size: 2.75em;
	border-radius: 2px;
}

/* Image square: the image alone, with the label on hover. */
.wplpo__option--image-square {
	padding: 2px;
}

.wplpo__option--image-square .wplpo__image {
	inline-size: 3.5em;
	block-size: 3.5em;
	border-radius: 2px;
}

/*
 * The availability rule (guide §13). An option says whether it can be had; the
 * wrapper says what this store does about it, so the treatment lives here rather
 * than in the markup and a store owner can restyle or undo it in one selector.
 *
 * `show` needs no rule at all: an unavailable option looks like any other, which is
 * exactly what that setting asks for. `hide` needs none either — the renderer never
 * emits the option.
 */

/* Grey: dimmed and drained of colour, still a link. The default. Cross-and-grey shares it. */
.wplpo--oos-grey .wplpo__option.is-out-of-stock,
.wplpo--oos-cross-grey .wplpo__option.is-out-of-stock {
	opacity: 0.45;
	filter: grayscale(100%);
}

.wplpo--oos-grey .wplpo__option.is-out-of-stock:hover,
.wplpo--oos-grey .wplpo__option.is-out-of-stock:focus,
.wplpo--oos-cross-grey .wplpo__option.is-out-of-stock:hover,
.wplpo--oos-cross-grey .wplpo__option.is-out-of-stock:focus {
	opacity: 0.7;
}

/* Cross: struck through. Where there is a label to strike, strike it. Cross-and-grey shares it. */
.wplpo--oos-cross .wplpo__option.is-out-of-stock .wplpo__label,
.wplpo--oos-cross-grey .wplpo__option.is-out-of-stock .wplpo__label {
	text-decoration: line-through;
}

/*
 * And where there is not — the two designs that show the label only on hover — draw
 * the line across the option itself. It goes on the anchor rather than on the swatch
 * or the image, because an `img` cannot carry a pseudo-element. A diagonal needs no
 * mirroring in an RTL store: it reads the same either way round.
 */
.wplpo--oos-cross .wplpo__option--colour-swatch.is-out-of-stock::after,
.wplpo--oos-cross .wplpo__option--image-square.is-out-of-stock::after,
.wplpo--oos-cross-grey .wplpo__option--colour-swatch.is-out-of-stock::after,
.wplpo--oos-cross-grey .wplpo__option--image-square.is-out-of-stock::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		currentColor calc(50% - 1px),
		currentColor calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	opacity: 0.65;
	pointer-events: none;
}

/*
 * Category cards. The options sit inside a product tile in a grid, so everything
 * is a size down and the row is allowed to be tight.
 */
.wplpo--card {
	--wplpo-gap: 0.35em;

	margin-block: 0.5em;
}

.wplpo--card .wplpo__option--buttons {
	padding: 0.3em 0.6em;
	font-size: 0.85em;
}

.wplpo--card .wplpo__option--colour-swatch .wplpo__swatch {
	inline-size: 1.25em;
	block-size: 1.25em;
}

.wplpo--card .wplpo__option--detailed-image {
	font-size: 0.85em;
}

.wplpo--card .wplpo__option--detailed-image .wplpo__image {
	inline-size: 2em;
	block-size: 2em;
}

.wplpo--card .wplpo__option--image-square .wplpo__image {
	inline-size: 2.5em;
	block-size: 2.5em;
}