/**
 * Boreal Variation Swatches
 *
 * The dropdown is hidden only once the script has taken over (.is-ready), and
 * the swatches only appear then. If the script fails to load, the customer is
 * left with a working dropdown instead of a row of buttons that do nothing.
 */

.boreal-swatches__list {
	display: none;
}

/* The three shapes on offer. The dot is one step tighter than the button so the
   selection frame around it keeps an even margin. */
.boreal-swatches.shape-circle {
	--boreal-swatch-radius: 50%;
	--boreal-dot-radius: 50%;
}

.boreal-swatches.shape-rounded {
	--boreal-swatch-radius: 8px;
	--boreal-dot-radius: 5px;
}

.boreal-swatches.shape-square {
	--boreal-swatch-radius: 2px;
	--boreal-dot-radius: 1px;
}

/*
 * !important is deliberate and load-bearing. WooCommerce ships
 * ".woocommerce div.product form.cart .variations select { display:inline-block }",
 * which outweighs anything this file can say about a select without copying
 * that whole chain of theme markup into the selector, and the day the chain
 * changes the customer would silently get both the dropdown and the swatches.
 */
.boreal-swatches.is-ready select {
	display: none !important;
}

.boreal-swatches.is-ready .boreal-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/*
 * Only the discs are pulled left, by exactly the swatch padding, which is the
 * room the selection ring lives in. Without it the first disc sits 4px right of
 * the style buttons above and the size buttons below, and the column reads as
 * crooked. The size buttons carry no such padding, so pulling them too would
 * push them 4px past the margin and simply move the problem down a row.
 */
.boreal-swatches.is-colors.is-ready .boreal-swatches__list {
	margin-left: -4px;
}

/*
 * The label cell of a variation row is centered on whatever the value cell
 * holds. A dropdown is one line tall so it lands right; a row of swatches with
 * the color name under it is nearly three, which dropped "Colors" 28px below
 * the discs it names. Only this row is touched, the size row keeps the theme's
 * own alignment. The class is set by the script, at the same moment the
 * dropdown is hidden, so nothing shifts twice.
 */
.variations tr.has-boreal-swatches th,
.variations tr.has-boreal-swatches td,
.variations tr.has-boreal-swatches .label,
.variations tr.has-boreal-swatches .value {
	/* !important for the same reason as the hidden select above: WooCommerce
	   sets vertical-align on these cells from a longer selector chain. */
	vertical-align: top !important;
}

.boreal-swatch {
	appearance: none;
	background: none;
	border: 0;
	/*
	 * Shape is Sarah's choice, set in Products -> Variation Swatches. Round by
	 * default.
	 *
	 * Worth knowing when a round swatch looks uneven: a thin ring around a
	 * circle is the one shape a browser struggles to draw evenly, anti-aliased
	 * at every angle and thicker on one side when the element lands on a
	 * fractional position. The square shapes do not have that problem, which is
	 * why they are offered rather than only being a matter of taste.
	 */
	border-radius: var( --boreal-swatch-radius, 50% );
	box-shadow: none;
	cursor: pointer;
	display: block;
	/*
	 * A button inherits neither the page font nor the page colour on its own:
	 * left alone it falls back to the browser's own UI face and to plain black,
	 * which put two typefaces and two blacks side by side with the style row
	 * above. Colour matters twice here, because the selected state is drawn in
	 * currentColor and would otherwise ring the choice in #000 rather than in
	 * the brand ink.
	 */
	color: inherit;
	font-family: inherit;
	height: 38px;
	line-height: 0;
	margin: 0;
	min-height: 0;
	/* Room for the selection ring, which is drawn outside the disc. */
	padding: 4px;
	width: 38px;
}

.boreal-swatch:hover,
.boreal-swatch:focus {
	background: none;
}

.boreal-swatch__dot {
	background-color: var( --boreal-swatch-color, transparent );
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: var( --boreal-dot-radius, 50% );
	/*
	 * Without this the hairline border is drawn outside the declared 100%, so a
	 * 30px slot holds a 31.6px disc and the disc's centre lands 0.8px off the
	 * centre of the selection ring. Too small to name, big enough to see: the
	 * black ring and the colour it circles do not look concentric.
	 */
	box-sizing: border-box;
	display: block;
	height: 100%;
	width: 100%;
}

/* A pale garment needs an edge, or it reads as an empty circle. */
.boreal-swatch.is-light .boreal-swatch__dot {
	border-color: rgba( 0, 0, 0, 0.28 );
}

/*
 * A color with no hex in the table. Deliberately obvious: it is still
 * selectable, so nothing is lost, but it should not look like a garment color.
 */
.boreal-swatch.is-unknown .boreal-swatch__dot {
	/*
	 * A checkerboard, not a diagonal bar: the bar already means "this color is
	 * not available in that size", and the two must not look alike. The
	 * checkerboard is the usual sign for "no color here".
	 */
	background-color: #fff;
	background-image:
		linear-gradient( 45deg, #c9c9c9 25%, transparent 25% 75%, #c9c9c9 75% ),
		linear-gradient( 45deg, #c9c9c9 25%, transparent 25% 75%, #c9c9c9 75% );
	background-position: 0 0, 5px 5px;
	background-size: 10px 10px;
	border-color: rgba( 0, 0, 0, 0.28 );
}

.boreal-swatch:hover .boreal-swatch__dot {
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.35 );
}

.boreal-swatch--text.is-selected .boreal-swatch__dot,
.boreal-swatch--text:hover .boreal-swatch__dot {
	box-shadow: none;
}

/*
 * The ring is an outline on the disc itself, not a second circle drawn on the
 * button around it. Two concentric circles a pixel or two apart round their
 * edges independently, and the gap between them came out thicker on one side:
 * a white crescent that read as a crooked swatch. One element cannot be
 * off-centre from itself. outline-offset also leaves real transparency, so the
 * gap shows the page's own background whatever it is, with no color to guess.
 */
/*
 * Selected: a frame on the button, drawn the same way the size buttons draw
 * theirs, with the swatch keeping its own thin edge inside it. Two straight
 * frames, no ring to trace.
 */
.boreal-swatch.is-selected {
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Keyboard focus sits outside the selection ring rather than on top of it. */
.boreal-swatch:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Not available in the size she picked. Kept on screen rather than removed:
 * a swatch that vanishes looks like a page glitch, a struck-out one explains
 * itself.
 */
.boreal-swatch.is-unavailable {
	cursor: not-allowed;
	opacity: 0.45;
}

.boreal-swatch.is-unavailable .boreal-swatch__dot {
	background-image: linear-gradient(
		to top right,
		transparent calc( 50% - 1px ),
		rgba( 0, 0, 0, 0.55 ) calc( 50% - 1px ),
		rgba( 0, 0, 0, 0.55 ) calc( 50% + 1px ),
		transparent calc( 50% + 1px )
	);
}

.boreal-swatches__name {
	display: block;
	font-size: 0.85em;
	line-height: 1.4;
	margin-top: 8px;
	opacity: 0.75;
}

/*
 * Sizes, and anything else that is not a color: a labelled button rather than a
 * disc. Same row, same keyboard behaviour, same struck-out state when a choice
 * is not available, so the two rows of a product page read as one control.
 */

.boreal-swatch--text {
	/* Matches .boreal-style in Boreal Style Family, on purpose: same border,
	   same radius, same palette, so the three rows read as one set of
	   controls instead of two plugins meeting on a page. */
	border: 1px solid var( --wp--preset--color--contrast-3, #89a9ba );
	border-radius: 8px;
	font-size: 14px;
	height: auto;
	line-height: 1.2;
	min-width: 3.4em;
	padding: 10px 18px;
	text-align: center;
	width: auto;
}

.boreal-swatch--text:hover {
	border-color: var( --wp--preset--color--contrast, #233036 );
}

.boreal-swatch--text.is-selected {
	border-color: currentColor;
	/* An inner line rather than a thicker border, which would move the row. */
	box-shadow: inset 0 0 0 1px currentColor;
}

.boreal-swatch--text:focus-visible {
	border-radius: 8px;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Sold out in the color she picked. Struck through rather than removed, for the
 * same reason as a color: a size that vanishes looks like a page glitch.
 */
.boreal-swatch--text.is-unavailable {
	background-image: linear-gradient(
		to top right,
		transparent calc( 50% - 1px ),
		rgba( 0, 0, 0, 0.4 ) calc( 50% - 1px ),
		rgba( 0, 0, 0, 0.4 ) calc( 50% + 1px ),
		transparent calc( 50% + 1px )
	);
	cursor: not-allowed;
	opacity: 0.5;
}

.boreal-swatch--text .boreal-swatch__text {
	display: block;
}

/* The disc rules must not reach the text buttons. */
.boreal-swatch--text.is-unavailable .boreal-swatch__dot,
.boreal-swatch--text:hover .boreal-swatch__dot {
	box-shadow: none;
}

/*
 * One page, one voice.
 *
 * The Style row above comes from Boreal Style Family and its label is small,
 * quiet and grey. WooCommerce renders the Color and Size labels large and
 * black, so the same product page showed two ideas of what a label is. These
 * rules put the three rows in the same register; the colon is added here
 * rather than in the attribute name, which would follow the choice into the
 * order and the invoice.
 */
/*
 * The long selector is not decoration. WooCommerce styles this label from
 * ".woocommerce div.product form.cart .variations label", which outweighs
 * anything shorter, so a plain ".variations th.label" was written, served, and
 * quietly ignored by the browser. Matching its shape is what makes these rules
 * actually apply.
 */
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations th.label label,
.variations th.label,
.variations th.label label {
	color: var( --wp--preset--color--contrast, #233036 );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
}

.woocommerce div.product form.cart table.variations th.label label::after,
.variations th.label label::after {
	content: ":";
}

/*
 * Style, Color and Size read as one column.
 *
 * WooCommerce lays a variation out as a table row: label in a left cell, the
 * control in a right one. Boreal Style Family puts its label above its buttons.
 * Stacked on the same product page those are two designs, and they measure as
 * two: the style buttons start at the left edge of the summary while the
 * swatches start 54px further right, under a label that is not above them.
 *
 * Turning the rows into blocks is what puts the three rows in one column, on
 * one left edge. The spacing repeats .boreal-styles and .boreal-styles-title on
 * purpose, so the rhythm continues rather than restarts.
 */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
	display: block;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
	width: auto;
}

.woocommerce div.product form.cart table.variations tr {
	margin: 0 0 20px;
}

.woocommerce div.product form.cart table.variations th.label {
	margin: 0 0 8px;
}

/*
 * The theme pads every variation cell with var(--wp--style--block-gap), 19.2px
 * here, which lands on top of the margins above and pushes the rows nearly
 * 40px apart. The margins are what set the rhythm, and they already match the
 * style row, so the padding goes.
 */
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
	padding-bottom: 0;
	padding-top: 0;
}

/*
 * The last four pixels.
 *
 * The add-to-cart form carries padding-left: 4px from the block theme, and the
 * style row is rendered outside that form. So the style buttons start at the
 * left edge of the summary and everything inside the form starts 4px in: the
 * kind of gap that is never obviously wrong and always looks sloppy.
 *
 * Pulled back here rather than by zeroing the form's padding, which belongs to
 * the theme and gives focus rings their room. Measured, not guessed: label,
 * size buttons and the visible edge of the first disc all land on 634 with the
 * style row above them.
 */
.woocommerce div.product form.cart table.variations {
	margin-left: -4px;
}

/* The colour name sits under the discs, so it lines up with what is drawn,
   not with the button box that carries the selection ring. */
.boreal-swatches__name {
	padding-left: 4px;
}

/*
 * The add-to-cart button before a choice is made.
 *
 * WooCommerce dims it to 50% until a colour and a size are picked. Half a navy
 * on a light page reads as a washed-out pale blue, and since it is the first
 * thing a customer sees on a product page, the shop looks broken rather than
 * waiting. Dimmed enough to still say "not yet", dark enough to still be the
 * brand navy.
 */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled {
	opacity: 0.75;
}