$logos-folder: '../images/modstyle-logos' !default;

/**
 * Review item
 */
.review-item {
	@include font-primary-regular;
	font-size: 16px;
	line-height: 19px;

	& + & {
		margin-top: 30px;
	}

	&__by {
		color: $color-charcoal5;
		line-height: 22px;
	}

	&__author {
		@include font-primary-bold;
	}

	&__date {
		color: $color-ivory7;
	}

	&__rating {
		margin-top: 10px;
	}

	&__text {
		color: $color-charcoal4;
		font-size: 16px;
		line-height: 26px;
		margin-top: 10px;
	}

	&__more-btn {
		@include font-primary-medium;
		appearance: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: $color-blue5;
		font-size: 14px;
		margin: 0;
		padding: 0;
		transition: color $trans-func $trans-time;

		&:hover,
		&:focus,
		&:active {
			color: $color-blue6;
		}
	}

	&__photos {
		list-style: none;
		margin: 10px -3px 0;
		overflow: hidden;
		padding: 0;
	}

	&__photos-title {
		@include font-primary-bold;
		color: $color-charcoal4;
		font-size: 16px;
		line-height: 26px;
		margin: 15px 0 5px;
	}

	&__photo {
		background: $color-charcoal1;
		border-radius: 4px;
		float: left;
		height: 75px;
		margin: 0 3px 6px;
		overflow: hidden;
		padding: 0;
		position: relative;
		width: 75px;

		&-img {
			cursor: pointer;
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
	}
}

/**
 * Reviews block
 */
.reviews-block {
	position: relative;

	&__header {
		@include font-primary-bold;
		border-bottom: 1px solid $color-charcoal1;
		border-top: 1px solid $color-charcoal1;
		color: $color-charcoal5;
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 30px;
		overflow: auto;
		padding: 5px 0;

		&-left {
			float: left;
		}

		&-right {
			float: right;

			label {
				@include font-primary-regular;
				color: $color-charcoal3;
				display: inline-block;
				margin: 0 10px 0 0;
				text-align: right;
			}

			i {
				position: absolute;
				right: 0;
				top: 5px;
				z-index: 1;
			}
		}
	}

	&__dropdown-wrapper {
		display: inline-block;
		position: relative;
	}

	&__dropdown {
		@include font-primary-bold;
		appearance: none;
		background: transparent;
		border: none;
		box-shadow: none;
		cursor: pointer;
		outline: none;
		padding-right: 20px;
		transition: width ease-in-out .65s;
		width: auto;
		z-index: 2;
	}

	&--loading {
		&::before {
			background: $color-white;
			bottom: 0;
			content: '';
			display: block;
			left: 0;
			opacity: .75;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 3;
		}

		&::after {
			@include font-primary-bold;
			background: $color-white;
			border-bottom: 1px solid $color-charcoal1;
			border-top: 1px solid $color-charcoal1;
			content: 'Loading reviews...';
			display: block;
			font-size: 14px;
			left: 0;
			line-height: 22px;
			padding: 5px 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 4;
		}
	}
}

.powered-by-google {
	@include background-image-2x('#{$logos-folder}/powered_by_google_on_white', 144px, 18px);
	& {
		background-color: $color-ivory3;
		background-position: center center;
		border-radius: 4px;
		height: 48px;
		margin: 30px 0 0;
	}
}