/* ======================== TESTIMONIAL ITEM */

.mb2-pb-testimonials {


	// Image
	.testimonial-image-src {
		width: 68px;
	    height: 68px;
		border-radius: 50% !important;
		border: solid 3px rgba(0,0,0,.1);
	}

	.testimonial-text {
	    margin-top: .75rem;
	}

	.testimonial-name {
	    color: var(--mb2-pb-headingscolor);
	    font-weight: $fwbold;
	}

	.testimonial-job {
	    color: var(--mb2-pb-accent1);

		&:before {
		    content: '\2013';
		    margin: 0 .4rem;
			color: $textcolor;
		}
	}

	.testimonial-companyname {
	    color: $textcolor_lighten;
	}

	&[data-clayout="1"],
	&.clayout1 {
		.mb2-pb-testimonials-item {
			text-align: center;
		}

		.rating-stars,
		.testimonial-image {
			margin-bottom: .75rem;
		}

		.rating-stars {
			margin-left: auto;
			margin-right: auto;
		}
	}


	// Creative layout
	&[data-clayout="2"],
	&.clayout2 {

		.mb2-pb-testimonials-item {
			background-color: #fff;
			padding: 1.45rem;
			@include mb2_border_radius(.35rem);
			@include mb2_box_shadow(0 20px 40px, rgba(0,0,0,.17));
		}

		.testimonial-header,
		.testimonials-item-inner {
		    display: flex;
		    flex-flow: row wrap;
		    justify-content: space-between;
		}


		.testimonials-item-inner {
		    align-items: center;
		}

	}


	&.isimage0 {

		&[data-clayout="2"],
		&.clayout2 {

			.testimonial-content {
			    flex: 0 0 100%;
			}
		}
	}


	&.isimage1 {

		&[data-clayout="2"],
		&.clayout2 {

			.testimonial-image {
			    flex: 0 0 88px;
				text-align: center;
			}

			.testimonial-content {
			    flex: 0 0 calc(100% - 88px);
			}

			@media only screen and (max-width: $wsmalldevice){

				.testimonial-meta,
				.rating-stars,
				.testimonial-image,
				.testimonial-content {
					flex: 0 0 100%;
				}

				.testimonial-image {
					margin-bottom: .75rem;
				}

				.rating-stars {
					margin-top: .75rem;
				}

			}
		}
	}


}


/* ======================== RATING STARS */


.rating-stars {

    position: relative;
	height: 20px;
	width: 95px;
    min-width: 95px;
    line-height: 1;

    > div {
    	position: absolute;
    	white-space: nowrap;
    	overflow: hidden;

        &.stars-full {
        	color: $color_warning;
			width: 0;
        }

        &.stars-empty {
        	color: rgba(0,0,0,.1);
        }
    }

    .dark & {
        > div {
            &.stars-empty {
            	color: rgba(255,255,255,.3);
            }
        }
    }

    i {
        width: 19px;
    	font-size: 17px;
        text-align: center;
    }

	&.rating-1 {
		.stars-full {
			width: 20%;
		}
	}

	&.rating-2 {
		.stars-full {
			width: 40%;
		}
	}

	&.rating-3 {
		.stars-full {
			width: 60%;
		}
	}

	&.rating-4 {
		.stars-full {
			width: 80%;
		}
	}

	&.rating-5 {
		.stars-full {
			width: 100%;
		}
	}

}