/**
 * MPS - Variation Stock UX
 * Greyed-out, non-clickable styling + hover tooltip for out-of-stock swatches.
 */

.cfvsw-swatches-option.mps-oos-swatch {
	position: relative;
	opacity: 0.5 !important;
	background-color: #f1f1f1 !important;
	border-color: #e0e0e0 !important;
	color: #9a9a9a !important;
	cursor: not-allowed !important;
	text-decoration: line-through;
	box-shadow: none !important;
}

.cfvsw-swatches-option.mps-oos-swatch .cfvsw-swatch-inner {
	cursor: not-allowed !important;
}

/* Never let an out-of-stock swatch render as selected/hovered. */
.cfvsw-swatches-option.mps-oos-swatch:hover,
.cfvsw-swatches-option.mps-oos-swatch.cfvsw-selected-swatch {
	border-color: #e0e0e0 !important;
	background-color: #f1f1f1 !important;
	color: #9a9a9a !important;
}

/* Tooltip bubble. */
.cfvsw-swatches-option.mps-oos-swatch:hover::after {
	content: attr(data-mps-oos-label);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 5px 9px;
	background: #222;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 4px;
	z-index: 30;
	pointer-events: none;
}

/* Tooltip arrow. */
.cfvsw-swatches-option.mps-oos-swatch:hover::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 3px;
	border: 5px solid transparent;
	border-top-color: #222;
	z-index: 30;
	pointer-events: none;
}