@import "mixins/mixins-master";

.recipe-meta {
	margin-bottom: 60px;
	@include flex();
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	border: 1px solid #eee;
	font-size: 14px;
	line-height: normal;
	padding: 25px 0px;
	.meta-item {
		@include flex();
		flex-direction: row;
		.icon {
			&:before {
				content: "\f4c0";
				font-size: 30px;
				font-family: ionicons;
				float: left;
				margin-right: 11px;
			}
		}
		&.cook-time {
			.icon:before {
				content: "\f3c7";
			}
		}
		&.yield {
			.icon:before {
				content: "\f3cd";
			}
		}
		&.servings {
			.icon:before {
				content: "\f47b";
			}
		}
		&.calories {
			.icon:before {
				content: "\f42e";
			}
		}
		&.level {
			.icon:before {
				content: "\f4a7";
			}
		}
		label {
			color: #333;
			font-weight: bold;
			text-transform: uppercase;
			line-height: normal;
			margin-bottom: 0;
		}
		p {
			line-height: 18px;
			margin: 0;
		}
		&:hover {
			.icon {
				color: #4F8EF7;
			}

		}
	}
}

.single-recipe {

	.step label {
		&:before {
			content: "\f401";
			font-family: ionicons;
			margin-right: 10px;
			font-weight: 400;
		}
		font-weight: bold;
		font-size: 16px;
		line-height: 1.63;
	}
}

.recipe-ingredients {
	padding: 4px 0px;
	ul {
		list-style: none;
		margin: 0;
	}
	li {
		cursor: pointer;
		padding: 4px 0px;
		&:before {
			content: "\f401";
			font-family: ionicons;
			margin-right: 10px;
		}
		&:last-child {
			padding-bottom: 0;
		}
		&:hover {
			color: #4F8EF7;
		}
		&.completed {
			&:before {
				content: "\f3ff";
			}
		}
	}
}

.single-recipe {
	.entry-header {
		.entry-meta {
			margin-bottom: 20px;
		}
	}
	.completed {
		text-decoration: line-through;
		color: #999;
		label {
			text-decoration: line-through;
			&:before {
				content: "\f3ff";
				text-decoration: inherit;
			}
		}
	}

	.recipe-ingredients > li.completed:before {
		content: "\f3ff";
		text-decoration: inherit;
	}

	.author .avatar {
		margin-right: 10px;
	}

	.entry-meta {
		font-size: 14px;
		line-height: normal;
		span {
			margin-bottom: 0 !important;
		}
		.screen-reader-text {
			height: auto;
			width: auto;
			position: relative !important;
		}
		a {
			margin-left: 10px;
			color: #333;
		}
	}

	.entry-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.entry-footer {
		.screen-reader-text {
			font-weight: 600;
		}
	}

	.author-wrap {
		display: flex;
		align-items: center;
	}

	.info-wrap {
		padding-left: 10px;
	}

	.author-name a {
		margin-left: 0px;
	}
}

.recipe-steps {
	margin-top: 23px;
	.step {
		margin-bottom: 19px;
		cursor: pointer;
		label {
			margin-bottom: 11px;
			cursor: pointer;
			color: #4F8EF7;
		}
		&:hover {
			color: #4F8EF7;
		}
	}
}

.recipe-notes {
	margin-top: 24px;
}

body.single-recipe article.recipe .entry-content {
	float: left !important;
	width: 70% !important;
	padding-right: 15px;
}

.entry-ingredients {
	width: 30%;
	float: right;
	background: #efefef;
	padding: 15px;
}

body.single-recipe article.recipe footer.entry-footer {
	clear: both;
	width: 100%;
	margin-top: 60px;
}