$icons: (popular), (spicy), (vegan), (vegetarian), (pescatarian), (gluten-free);

.wp-block-coblocks-food-item {
	margin-top: 2.75em;

	&__figure {
		display: flex;
		margin: 0.35em 0 1.25em;
		overflow: hidden;
		padding-top: 100%;
		position: relative;
		width: 100%;

		img,
		img[itemprop="image"] {
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			vertical-align: middle;
			width: 100%;

			// IE 10+ Support
			@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
				height: auto;
				left: 50%;
				min-width: 100%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	&__heading-wrapper {
		align-items: center;
		display: flex;
		flex: 1 85%;
		margin: 0 0 0.25em;
		order: 1;
	}

	&__heading,
	&__heading[itemprop="name"] {
		margin: 0;
		padding: 0;
	}

	&__content {
		align-content: flex-start;
		display: flex;
		flex: 1 100%;
		flex-wrap: wrap;
	}

	&__attributes {
		display: flex;
		margin-left: 0.4em;

		svg {
			fill: currentColor;
			height: 18px;
			width: 18px;

			&:last-of-type {
				margin-right: 0;
			}
		}
	}

	&__attribute {
		background: none;
		border: none;
		display: flex;
		margin-right: 0.25em !important;
		padding: 0;

		&--spicier {
			margin-left: -0.25em !important;
		}
	}

	&__description {
		flex: 1 100%;
		margin: 0;
		order: 3;
	}

	&__price {
		flex: 1 15%;
		margin: 0.5em 0 0 0;
		opacity: 0.7;
		order: 2;
	}

	&__icon {
		background-color: currentColor;
		background-repeat: no-repeat;
		background-size: cover;
		display: inline-block;
		height: 18px;
		width: 18px;
	}

	@each $icon in $icons {

		&__attribute--#{$icon} &__icon {
			mask-image: url(/assets/food-attribute/#{$icon}.svg);

			&:last-of-type {
				margin-right: 0;
			}
		}

		// IE 10+ Support
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

			&__attribute--#{$icon} &__icon {
				background-image: url(/assets/food-attribute/#{$icon}.svg);
				color: transparent !important;
			}
		}
	}
}
