$article-posttype-icon-width: 40px;
$article-posttype-spacing: 50px;

.items-more {
	>a {
		display: block;
	}
}

.article-title .page-header [itemprop="name"] {
	font-size: 26px;
}

.article-info-term {
	display: none;
}

.article-info {
	font-size: 14px;

	a,
	span,
	i {
		color: #6b6b6b;
	}

	>dd {
		display: inline-block;
		margin-bottom: 0;
	}
	> dd:not(:last-child) {
		padding-right: 10px;
	}
	> dd.article-post-type {
		padding-right: 0;
	}
}

// Tags
ul.tags{
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	li:not(:last-child) {
		margin-right: 10px;
	}
	&:before {
		content: "\f02c";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		margin-right: 10px;
		color: $tag-icon-color;
		font-size: 20px;
	}
	.label {
		background-color: $tag-bg;
		padding: $tag-padding;
		font-size: $tag-font-size;
		line-height: normal;
		color: $tag-text-color;
	}
}

.article-wraper {
	height: 100%;
	padding-bottom: 30px;
	.card-body:not(.has-image) {
		.article-post-type {
			display: none;
		}
	}
}

.article-wraper-inner {
	@extend .card;
	height: 100%;
}

.article-icon {
	position: absolute;
	margin-bottom: 80px;
	display: block;
	width: $article-posttype-icon-width;
	height: $article-posttype-icon-width;
	top: -6px;
	right: 20px;
	line-height: $article-posttype-icon-width;
	text-align: center;
	font-size: 24px;

	&:before,
	&:after {
		content: "";
		position: absolute;
	}

	&:before {
		right: -6px;
	}

	&:after {
		bottom: -20px;
		left: 0;
	}

	&.article-icon-quote {
		background-color: $post-type-quote-bg;
		color: $post-type-quote-color;

		&:before {
			@include triangle(6px, darken($post-type-quote-bg, 15%), down-left);
		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-quote-bg, up);
		}
	}

	&.article-icon-gallery {
		background-color: $post-type-gallery-bg;
		color: $post-type-gallery-color;

		&:before {
			@include triangle(6px, darken($post-type-gallery-bg, 15%), down-left);
		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-gallery-bg, up);
		}
	}

	&.article-icon-review {
		background-color: $post-type-review-bg;
		color: $post-type-review-color;

		&:before {
			@include triangle(6px, darken($post-type-review-bg, 15%), down-left);
		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-review-bg, up);
		}
	}

	&.article-icon-youtube {
		background-color: $post-type-youtube-bg;
		color: $post-type-youtube-color;

		&:before {
			@include triangle(6px, darken($post-type-youtube-bg, 15%), down-left);
		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-youtube-bg, up);
		}
	}

	&.article-icon-vimeo {
		background-color: $post-type-vimeo-bg;
		color: $post-type-vimeo-color;

		&:before {
			@include triangle(6px, darken($post-type-vimeo-bg, 15%), down-left);
		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-vimeo-bg, up);
		}
	}

	&.article-icon-soundcloud {
		background-color: $post-type-soundcloud-bg;
		color: $post-type-soundcloud-color;

		&:before {
			@include triangle(6px, darken($post-type-soundcloud-bg, 15%), down-left);
		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-soundcloud-bg, up);
		}
	}

	&.article-icon-spotify {
		background-color: $post-type-spotify-bg;
		color: $post-type-spotify-color;

		&:before {
			@include triangle(6px, darken($post-type-spotify-bg, 15%), down-left);

		}

		&:after {
			@include triangle($article-posttype-icon-width $article-posttype-icon-width/2, transparent $post-type-spotify-bg, up);
		}
	}
}

.img_caption {
	position: relative;

	.img_caption {
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, .5);
		color: #fff;
		margin: 0;
		padding: 5px;
	}
}

// Author Info
.author-wrap {
	padding: 35px;
	border: 1px solid #eaeaea;
	margin-bottom: 30px;
	@include media-breakpoint-down(sm) {
		padding: 15px;
	}
	.author-header {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eaeaea;
		margin-bottom: 15px;
		padding-bottom: 20px;
	}
	.author-social-links {
		margin: 0;
		padding: 0;
		list-style: none;
		a {
			color: #8e8e8e;
			font-size: 14px;
		}
		.author-social-link {
			display: inline-block;
			margin-right: 15px;
		}
	}
	.author-thumb {
		min-width: 80px;
		margin-right: 20px;
	}
	.author-label {
		font-size: 14px;
		font-weight: normal;
	}
	.author-name {
		font-size: 22px;
		font-weight: 600;
		line-height: normal;
	}
}
.author-description {
	margin: 0;
}

.full-image {
	margin-bottom: 20px;
	&.text-left {}
	&.text-right {
		.img_caption {
			margin-left: auto;
			margin-right: 0;
		}
	}
	&.text-none {
		text-align: center;
	}
	&.text-none {
		.img_caption {
			margin: 0 auto;
		}
	}
}

.item-image.text-none {
	text-align: center;
}

// Gallery Type

.article-gallery {
	.carousel-control-prev,
	.carousel-control-next {
		height: 50px;
		width: 50px;
		top: 50%;
		transform: translateY(-50%);
		background-color: $primary;
		background-color: lighten($color: $primary, $amount: 20);
		opacity: 1;
	}
	.carousel-control-prev {
		border-radius: 0 4px 4px 0;
	}
	.carousel-control-next {
		border-radius: 4px 0 0 4px;
	}
}

// Quote Type

.article-quote-area {
	background-color: rgba($primary, .1);
	padding: 60px;
	margin-bottom: $article-posttype-spacing;
	p {
		font-size: 150%;
		line-height: normal;
	}
	blockquote {
		border-left: 5px solid $primary;
		margin: 0;
		padding: 0 40px;
		border: 0;
		position: relative;
		font-style: normal;
		&:before {
			content: "";
			width: 8px;
			height: 100%;
			background-color: $primary;
			position: absolute;
			left: 0;
			border-radius: 8px;
		}
		&:after {
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			position: absolute;
			top: 20px;
			right: -40px;
			font-size: 70px;
			color: rgba($primary, .1);
		}
	}
	.blockquote-footer {
		text-align: right;
	}
}

// Video Type

.article-video {
	margin-bottom: $article-posttype-spacing;
}

// Review Type

.article-review {
	margin-bottom: $article-posttype-spacing;
	> div:not(:last-child) {
		margin-bottom: 20px;
	}
	> div:not(:last-child):not(.review-head) {
	   padding-bottom: 20px;
		padding-top: 20px;
	}
}

.review-total-score {
	min-width: 130px;
	background-color: $primary;
	text-align: center;
	color: $white;
	display: flex;
	.review-total-score-wrapper {
		align-self: center;
		width: 100%;
	}
	span {
		display: block;
	}
	.score-value {
		font-size: 80px;
		font-weight: 600;
		line-height: 1;
		margin-bottom: 10px;
	}
	.score-label {
		font-size: 22px;
		font-weight: 400;
	}
}

.review-good-bad {
	.cons-heading,
	.pros-heading {
		font-size: 24px;
		font-weight: bold;
		line-height: 1.5rem;
		margin-bottom: 20px;
	}
}

.review-criterias {
	.review-criteria:not(:last-child) {
		margin-bottom: 30px;
	}
}

.review-criteria-title {
	display: flex;
}

.review-criteria-label {
	font-weight: 600;
	font-size: 18px;
	line-height: normal;
	margin-bottom: 5px;
	flex-grow: 1;
}

.review-criteria-rating {
	font-weight: 600;
	font-size: 18px;
	line-height: normal;
	margin-bottom: 5px;
}

.review-criteria-progress {
	height: 10px;
}

.review-content {
	padding: 25px;
}

.review-summary {
	margin: 0;
}

.btn-prosandcons-wrapper {
	text-align: center;
}

.btn-prosandcons {
	@extend .btn-primary;
}

.pros-cons-list {
	list-style-type: none;
	margin: 0 0 0 1.5em;
	padding: 0;
	li {
		position: relative;
	}
	.fas {
		left: -2em;
		position: absolute;
		text-align: center;
		width: 2em;
		line-height: inherit;
	}
}

// Related Article

.relatedposts-wrap {
	@extend .mt-5;
}

.related-article-title {
	font-size: 24px;
}