Template:Demo RecipeItemIcon/styles.css

/* NOTE: The size of 'em' is set in the template via inline styles setting 'font-size' */
.recipe-item-icon {
	position: relative;
	width: fit-content;
	height: fit-content;
	overflow: hidden;
	border-width: clamp(3px, 0.05em, 8px);
	border-radius: clamp(4px, 0.1em, 16px);
	box-shadow:
	  0 0.04em 0.06em rgba(0,0,0,0.75),
	  0 0.09em 0.14em rgba(0,0,0,0.45);
	margin: 0.1em;
}

.recipe-item-icon.border-white {
	background-color: white;
	border-color: white;
	border-style: solid;
}

.recipe-item-icon.border-yellow {
	background-color: yellow;
	border-color: yellow;
	border-style: solid;
}

.recipe-item-icon.border-green {
	background-color: lime;
	border-color: lime;
	border-style: solid;
}

.recipe-item-icon.has-count::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: bottom right;
	/* Using background-image over background because image won't intercept clicks (it'll let use open the image link even when there's a count)*/
	background-image: linear-gradient(
		315deg,
		rgba(0,0,0,0.55) 0%,
		rgba(0,0,0,0.4) 28%,
		rgba(0,0,0,0.2) 35%,
		rgba(0,0,0,0) 42%
	);
}

.recipe-item-icon__img-container {
	width: 1em;
	height: 1em;
	z-index: 0;
}

.recipe-item-icon__img-container img {
	display: block;
}

.recipe-item-icon__count {
	position: absolute;
	z-index: 2;
	bottom: clamp(4px, 0.1em, 16px);
	right: clamp(4px, 0.1em, 16px);
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.85);
	font-weight: bold;
	font-size: 0.25em;
}

/* Kill VE filler paragraph after the icon, only in the demo table */
.recipe-icon-demo td .recipe-item-icon + p {
  margin: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
}

.recipe-icon-demo td .recipe-item-icon + p > br {
  display: none;
}