:root {
	--katsee-backorder-color: #deb4ca;
}

/* Flatsome swatches use box-shadow (not border) for their default ring so the color/
   image content isn't shrunk by border-width - we do the same reset here and only fall
   back to an actual border for the dashed style (box-shadow can't be dashed). The
   ".variations_form .ux-swatch.selected" rule (flatsome-swatches/class-swatches-frontend.php)
   is more specific than this single class, so the selected-state accent ring still wins
   and displays correctly on top of this when a backorder swatch gets selected. */
.ux-swatch--backorder {
	box-sizing: border-box;
	box-shadow: none;
	border: 1.5px dashed var(--katsee-backorder-color);
}

.ux-swatch--backorder:hover:not(.selected):not(.disabled) {
	box-shadow: none;
}

/* small dot badge, positioned outside the swatch content itself (color/image/label are
   never touched) so it works identically across all three swatch types */
.ux-swatch--backorder::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--katsee-backorder-color);
	pointer-events: none;
}