// MIXINS & GLOBAL VARIALS ALL OVER THE THEME & CSS3 MIXINS--------------------
@import "../utils/variables";
@import "../utils/mixins";

// Reviews Styles
#review-box{
	margin-top: 30px;
}

.review-top {
  float: left;
  width: 55%;
	margin: 30px 20px 30px 0;

	@include breakpoint(max_min_sm){
		&#review-box{
			margin-top: 15px;
		}
	}
}

#story-highlights + .review_wrap #review-box{
	width: 48%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 20px;

	@include breakpoint_min(1045px){
		.full-width &{
			width: calc(96% - 450px);
		}
	}
}

.review_wrap {
	.widget &{
		margin: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	strong {
		margin: 0;
	}

	br {
		display: none;
	}

	h2.review-box-header {
		margin-bottom: 20px;

		&:after{
			width: 70px;
		}
	}
}

.review-item,
.review-summary,
.user-rate-wrap{
	opacity: 1;
	border: $base-border;
	background-color: rgba(0,0,0,0.03);
	border-radius: $base-border-radius;
	margin-bottom: 10px;
	overflow: hidden;
	line-height: 20px;
	padding: 15px;
	transition: 0.2s;
}

.entry .review-item h5 {
	position: relative;
	z-index: 2;
	float: left;
	margin-bottom: 0;
	line-height: 20px;
}

.review-stars{
	.stars-large,
	.hearts-large,
	.thumbs-large {
		float: right;
	}
}

.review-percentage .review-item {
	padding: 10px 15px;

	h5 {
		float: none;
		margin-bottom: 5px;
	}

	span {
		position: relative;
		display: block;

		span {
			background-color: $brand-color;
			display: block;
			height: 7px;
			width: 0;
			transition: width 1.5s;
			position: relative;
			z-index: 2;
		}

		&:after{
			content: "";
			width: 100%;
			background: rgba(0,0,0,0.08);
			height: 7px;
			position: absolute;
			z-index: 1;
			bottom: 0;
		}
	}
}

.post-large-rate {
	display: inline-block;

	span {
		display: block;
		float: left;
	}
}

.post-large-rate,
.post-small-rate{
	float: right;
	position: relative;
	@include font-size(14px);
	transition: none;
	letter-spacing: 4px;
	text-align: center;
	text-indent: 2px;
	white-space: nowrap;
	word-wrap: normal; // IE fix
	direction: ltr;

	&:after{
		color: rgba(154, 154, 154, 0.65);
		content: "\f006" "\f006" "\f006" "\f006" "\f006" ;
		font-family: "FontAwesome";
		display: block;
	}

	span{
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		color: #ffc107;
		display: block;
		transition: none;
		text-align: left;
		word-wrap: normal; // IE fix


		&:after{
			content: "\f005" "\f005" "\f005" "\f005" "\f005" ;
			font-family: "FontAwesome";
			display: block;
		}
	}
}

.hearts-large,
.hearts-small{
	margin-right: 0;
	@include font-size(14px);

	&:after{
		content: "\f08a" "\f08a" "\f08a" "\f08a" "\f08a" ;
	}

	span{
		color: #ff0043;

		&:after{
			content: "\f004" "\f004" "\f004" "\f004" "\f004" ;
		}
	}
}

.thumbs-large,
.thumbs-small{
	@include font-size(14px);

	&:after{
		content: "\f164" "\f164" "\f164" "\f164" "\f164" ;
	}

	span{
		color: #ffb245;

		&:after{
			content: "\f164" "\f164" "\f164" "\f164" "\f164" ;
		}
	}
}

.post-small-rate {
	@include font-size(12px);

	span {
		display: block;
		float: left;
	}
}

.post-single-rate {
	float: left;
	margin-right: 5px;

	.rtl &{
		margin-right: 0;
		margin-left: 5px;
	}
}

.review-summary {
	padding: 0;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
}

.review-short-summary {
	display: flex;
	padding: 15px;
	flex-grow: 1;
	align-items: flex-start;
	flex-direction: column;
	justify-content: center;

	a {
		color: #cccccc;
	}
}

.review-final-score {
	float: right;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 150px;
	text-align: center;
	padding: 25px;
	border: $base-border;
	border-width: 0 0 0 1px;

	.post-large-rate{
		float: none;
		margin: 0 auto;
		@include font-size(18px);
	}

	h3 {
		font-size: 44px;
		line-height: 1;
		color: $brand-color;
		margin-bottom: 10px;

		span {
			@include font-size(17px);
			font-weight: normal;
		}
	}

	h4 {
		@include font-size(16px);
		margin-top: 10px;
	}

	.rtl &{
		float: left;
	}
}

.user-rate-wrap {
	.user-rating-text {
		float: left;
		line-height: 18px;
	}

	.user-rate {
		float: right;
		padding: 0;
		position: relative;

		&:not(.rated-done){
			cursor: pointer;
		}

		span{
			margin: 0;
		}

		// spinner circle width
		@include spinner-width(26px);

		.spinner {
	    width: 2.5em;

	    > div {
		    width: 0.4em;
		    height: 0.4em;
			}
		}
	}
}

.taq-load {
	position: relative;
	width: 98px;
	height: 20px;
	display: block;
}

// Review Widgets
.widget{
	.review_wrap .review-box-header{
		@include font-size(13px);
	}

	.user-rate-wrap {
		margin-bottom: 0;
	}
}
.reviews-posts {
	list-style: none;

	li {
		overflow: hidden;
	}

	.review-thumbnail {
		float: left;
		margin-right: 15px;
		transition: opacity 0.3s;

		&:hover{
			opacity: 0.8;
		}
	}

	h3 {
		margin-bottom: 5px;
		@include font-size(14px);
	}
}

.review-bottom {
	clear: both;
}

.taq-clear {
	clear: both;
}

// Dark Skin
.dark-skin{
	.review-item,
	.review-summary,
	.user-rate-wrap,
	.review-final-score{
		border-color: $base-border-color-in-white;
	}
}

// RTL
.rtl{
	.review-top {
		float: right;
		margin-right: 0;
		margin-left: 20px;
	}

	#review-box{
		.post-large-rate,
		.post-small-rate,
		.user-rate {
			float: left;
		}

		&.review-stars .review-item h5,
		.user-rate-wrap .user-rating-text {
			float: right;
		}

		.review-final-score {
			border-width: 0 1px 0 0;
		}

		.post-single-rate {
			float: right;
			margin-right: 0;
		}
	}

	.post-large-rate,
	.post-small-rate{
		text-indent: 0;

		span{
			text-align: right;
		}
	}

	.post-small-rate{
		float: right;

		&.hearts-small span{
			right: 1px;
		}
	}

	ul.reviews-posts .review-thumbnail {
		float: right;
		margin-left: 10px;
		margin-right: 0;
	}
}

@include breakpoint(max_min_sm){
	#review-box.review-top,
	.rtl #review-box.review-top,
	#story-highlights + .review_wrap #review-box{
		float: none;
		width: auto;
		margin-right: 0;
		margin-left: 0;
	}
}

@include breakpoint(max_min_xs){
	.review-summary,
	.review-short-summary,
	.review-final-score,
	.user-rating-text{
		display: block;
		width: 100%;
		float: none;
		text-align: center;
	}

	#review-box .review-final-score,
	.rtl #review-box .review-final-score{
		border-width: 0 0 1px;
	}

	.user-rate-wrap .user-rate{
		margin-top: 10px;
		float: left;
		position: relative;
		@include center(x);
	}

	.rtl #review-box .review-final-score .post-large-rate,
	.rtl #review-box .review-final-score .post-small-rate{
		float: none;
	}
}

@include breakpoint(md){
	.widget{
		.review-summary,
		.review-short-summary,
		.review-final-score,
		.user-rating-text{
			display: block;
			width: 100%;
			float: none;
			text-align: center;
		}

		#review-box .review-final-score{
			border-width: 0 0 1px;
		}

		.user-rate-wrap .user-rate{
			margin-top: 10px;
			float: left;
			position: relative;
			@include center(x);
		}
	}

	.rtl .widget #review-box .review-final-score .post-large-rate,
	.rtl .widget #review-box .review-final-score .post-small-rate{
		float: none;
	}
}
