/**
 * MR Stiff Product Manual Tab — global custom stock status.
 *
 * An animated status dot before WooCommerce's availability text, colour-keyed to
 * the stock state. Colours come from CSS custom properties set inline from the
 * plugin settings (see MSPMT_Stock_Status::enqueue), with sensible fallbacks.
 *
 * Only applies to stock lines this plugin has tagged with `.mspmt-stock`, so no
 * other markup is affected.
 */

.stock.mspmt-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.stock.mspmt-stock::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --mspmt-stock-dot, #19a04b );
	box-shadow: 0 0 0 0 var( --mspmt-stock-dot, #19a04b );
	animation: mspmt-stock-pulse 1.6s ease-out infinite;
}

.stock.mspmt-stock--in {
	--mspmt-stock-dot: var( --mspmt-stock-in, #19a04b );
	color: var( --mspmt-stock-in, #19a04b );
}

.stock.mspmt-stock--low {
	--mspmt-stock-dot: var( --mspmt-stock-low, #f5a623 );
	color: var( --mspmt-stock-low, #f5a623 );
}

.stock.mspmt-stock--out {
	--mspmt-stock-dot: var( --mspmt-stock-out, #e0402c );
	color: var( --mspmt-stock-out, #e0402c );
}

@keyframes mspmt-stock-pulse {
	0% {
		box-shadow: 0 0 0 0 var( --mspmt-stock-dot, #19a04b );
		opacity: 1;
	}

	70% {
		box-shadow: 0 0 0 6px transparent;
		opacity: .85;
	}

	100% {
		box-shadow: 0 0 0 0 transparent;
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.stock.mspmt-stock::before {
		animation: none;
	}
}