/* Out of stock 1.0 - storefront.
   Our markup lives under .ocmod-stock. The only foreign element touched is the
   product image that follows our anchor inside the same image block, and only
   through a selector that starts with our own class.
   Colours, sizes and the grey level come from CSS variables printed in <head>. */

/* zero-height anchor: the first child of the image block, no position needed on theme elements */
.ocmod-stock {
	display: block;
	position: relative;
	height: 0;
	z-index: var(--ocmod-stock-z, 10);
	text-align: left;
	line-height: normal;
}

.ocmod-stock__list {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: var(--ocmod-stock-offset, 4px);
	right: var(--ocmod-stock-offset, 4px);
	max-width: calc(100% - 2 * var(--ocmod-stock-offset, 4px));
	pointer-events: none;
}

.ocmod-stock--left .ocmod-stock__list {
	justify-content: flex-start;
	right: auto;
	left: var(--ocmod-stock-offset, 4px);
}

.ocmod-stock__item {
	display: block;
	max-width: 100%;
	padding: 1px 6px;
	overflow: hidden;
	border-radius: var(--ocmod-stock-radius, 4px);
	background: var(--ocmod-stock-bg, #555555);
	color: var(--ocmod-stock-color, #ffffff);
	font-size: var(--ocmod-stock-size, 11px);
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ocmod-stock--upper .ocmod-stock__item {
	text-transform: uppercase;
}

/* the photo that follows the anchor: directly, or inside the theme's link */
.ocmod-stock--gray ~ img,
.ocmod-stock--gray ~ * img {
	filter: grayscale(var(--ocmod-stock-gray, 100%));
	opacity: var(--ocmod-stock-opacity, 0.7);
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.ocmod-stock--hover ~ img:hover,
.ocmod-stock--hover ~ *:hover img {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ocmod-stock--gray ~ img,
	.ocmod-stock--gray ~ * img {
		transition: none;
	}
}