/**
 * Star rating 1-5
 */
$star-rating-height: 24px;
$star-rating-height-sm: 20px;
$star-rating-height-lg: 28px;

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

@mixin star-rating-sm {
	.star-rating {
		&__stars {
			height: $star-rating-height-sm;
			line-height: $star-rating-height-sm;

			&::before,
			&::after {
				font-size: $star-rating-height-sm;
				height: $star-rating-height-sm;
				line-height: $star-rating-height-sm;
			}
		}
	}
}

@mixin star-rating-lg {
	height: $star-rating-height-lg;
	line-height: $star-rating-height-lg;

	.star-rating {
		&__stars {
			height: $star-rating-height-lg;
			line-height: $star-rating-height-lg;

			&::before,
			&::after {
				font-size: $star-rating-height-lg;
				height: $star-rating-height-lg;
				line-height: $star-rating-height-lg;
			}
		}
	}
}

.star-rating {
	display: inline-block;

	> span {
		vertical-align: middle;
	}

	&__stars {
		display: inline-block;
		height: $star-rating-height;
		line-height: $star-rating-height;
		margin-right: 5px;
		position: relative;

		&::before,
		&::after {
			@include icon-fill;
			content: '\e907\e907\e907\e907\e907';
			display: inline-block;
			font-size: $star-rating-height;
			height: $star-rating-height;
			line-height: $star-rating-height;
			overflow: hidden;
			white-space: nowrap;
		}

		&::before {
			color: $color-ivory5;
			position: relative;
			z-index: 1;
		}

		&::after {
			color: $color-yellow5;
			left: 0;
			position: absolute;
			top: 0;
			z-index: 2;
			width: 0;
		}

		&--00 {
			&::before {
				color: $color-ivory5;
				font-size: $star-rating-height;
				height: $star-rating-height;
				line-height: $star-rating-height;
			}

			&::after {
				display: none;
			}
		}

		&--05 {
			&::after {
				width: 10%;
			}
		}

		&--10 {
			&::after {
				width: 20%;
			}
		}

		&--15 {
			&::after {
				width: 30%;
			}
		}

		&--20 {
			&::after {
				width: 40%;
			}
		}

		&--25 {
			&::after {
				width: 50%;
			}
		}

		&--30 {
			&::after {
				width: 60%;
			}
		}

		&--35 {
			&::after {
				width: 70%;
			}
		}

		&--40 {
			&::after {
				width: 80%;
			}
		}

		&--45 {
			&::after {
				width: 90%;
			}
		}

		&--50 {
			&::after {
				width: 100%;
			}
		}
	}

	&__label {
		@include font-primary-bold;
		color: $color-charcoal5;
		display: inline-block;
		font-size: 12px;
		line-height: 16px;
		transition: color $trans-func $trans-time;
		white-space: nowrap;

		&--verified {
			color: $color-orange5;
			font-size: 14px;
			line-height: 18px;
		}

		&--text {
			@include font-primary-regular;
			color: $color-charcoal4;
			font-size: 14px;
			line-height: 18px;
		}
	}

	&--lg {
		@include star-rating-lg;
	}

	&--sm {
		@include star-rating-sm;
	}
}

a {
	&.star-rating {
		&:hover,
		&:focus,
		&:active {
			.star-rating {
				&__label {
					color: $color-charcoal6;

					&--verified {
						color: $color-orange6;
					}

					&--text {
						color: $color-charcoal5;
					}
				}
			}
		}
	}
}

/**
 * External ratings
 */
.ext-rating-icon {
	@include font-primary-bold;
	border: 1px solid $color-charcoal1;
	border-radius: 16px;
	color: $color-charcoal5;
	display: inline-block;
	font-size: 17px;
	line-height: 20px;
	padding: 5px 10px;
	transition: border-color $trans-time $trans-func;

	&--google,
	&--bbb,
	&--trustpilot,
	&--bestcompany {
		background-position: 10px 50%;
		background-repeat: no-repeat;
		padding-left: 30px;
	}

	&--google {
		background-image: url('#{$rating-icons-folder}/google.svg');
		background-size: 14px 14px;
	}

	&--bbb {
		background-image: url('#{$rating-icons-folder}/bbb.svg');
		background-position: 8px 50%;
		background-size: 22px 22px;
	}

	&--trustpilot {
		background-image: url('#{$rating-icons-folder}/trustpilot.svg');
		background-position: 8px 50%;
		background-size: 22px 22px;
	}

	&--bestcompany {
		background-image: url('#{$rating-icons-folder}/bestcompany.svg');
		background-position: 8px 50%;
		background-size: 20px 20px;
	}
}

@include breakpoint-phone {
	.ext-rating-icon {
		&--trustpilot {
			background-size: 14px 14px;
			padding-left: 26px;
		}
	}
}

a {
	&.ext-rating-icon {
		&:focus,
		&:hover,
		&:active {
			border-color: $color-charcoal2;
			color: $color-charcoal5;
		}
	}
}

/**
 * Ratings set
 */
.ratings-set {
	margin: 0 0 15px;

	&__group {
		font-size: 0;

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

		.ext-rating-icon {
			+ .ext-rating-icon {
				margin-left: 9px;
			}
		}
	}
}

/**
 * Large rating icons
 */
@mixin large-rating-icon-vertical-layout {
	font-size: 20px;
	height: 65px;
	line-height: 20px;
	min-width: 40px;
	padding: 45px 0 0;
	text-align: center;
	white-space: nowrap;

	&::before {
		left: 50%;
		margin-left: -20px;
		top: 0;
	}
}

.large-rating-icon {
	@include font-primary-bold;
	color: $color-charcoal5;
	display: inline-block;
	font-size: 28px;
	height: 40px;
	line-height: 40px;
	padding-left: 45px;
	position: relative;

	&::before {
		@include icon-fill;
		color: $color-yellow5;
		content: '\e907';
		font-size: 40px;
		height: 40px;
		left: 0;
		line-height: 40px;
		position: absolute;
		top: 0;
		width: 40px;
	}

	&::after {
		@include font-primary-regular;
		color: $color-charcoal4;
		content: '/ 5';
		display: inline-block;
		font-size: 15px;
		vertical-align: middle;
	}

	&--empty-star {
		color: $color-charcoal1;

		&::before {
			@include icon-stroke;
			color: $color-ivory5;
			content: '\e908';
			font-size: 40px;
		}
	}

	&--google {
		&::before {
			background-image: url('#{$rating-icons-folder}/google.svg');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 28px 28px;
			content: '';
		}
	}

	&--trustpilot {
		&::before {
			background-image: url('#{$rating-icons-folder}/trustpilot.svg');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 28px 28px;
			content: '';
		}
	}

	&--bbb {
		&::before {
			background-image: url('#{$rating-icons-folder}/bbb.svg');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 38px 38px;
			content: '';
		}

		&::after {
			display: none;
		}
	}

	&--bestcompany {
		&::before {
			background-image: url('#{$rating-icons-folder}/bestcompany.svg');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 38px 38px;
			content: '';
		}

		&::after {
			display: none;
		}
	}
}

@include breakpoint-phone {
	.large-rating-icon {
		@include large-rating-icon-vertical-layout;
	}
}

/**
 * Large rating icons set
 */
.large-rating-icon-set {
	display: flex;
	flex-wrap: wrap;

	&__item {
		flex: 1;
		max-width: 165px;
		min-width: 130px;
		padding: 20px 0;

		&--large {
			max-width: 100%;
			min-width: 300px;
			padding: 0;
		}
	}
}

@include breakpoint-phone {
	.large-rating-icon-set {
		&__item {
			&:not(.large-rating-icon-set__item--large) {
				min-width: 70px;
			}
		}
	}
}

/**
 * Review prompt
 */
.review-prompt {
	color: $color-charcoal5;
	font-size: 16px;
	line-height: 23px;
	margin: 0 0 30px;

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

	&__cta {
		margin-top: 15px;

		.btn {
			margin: 0;
			width: auto;
		}
	}
}