/* 05.22. Testimonial */
.testimonial {
	clear: both;

	&__author-avatar {
		@include media-breakpoint-up(lg) {
			width: 50%;
			float: left;
		}

		&--reverse {
			@include media-breakpoint-up(lg) {
				float: right;
			}

			.testimonial & {
				+ blockquote {
					&::before {
						@include media-breakpoint-up(lg) {
							left: inherit;
							right: ptr(-24);
							border-right: 0;
							border-left: ptr(25) solid #ffffff;
						}
					}
				}
			}
		}
	}

	&__container {
		margin-top: ptr(51);
	}

	blockquote {
		position: relative;
		background-color: #ffffff;
		padding: ptr(34) ptr(45) ptr(36);

		@include media-breakpoint-up(lg) {
			width: 50%;
			float: right;
		}

		&::before {
			@include media-breakpoint-up(lg) {
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				top: ptr(42);
				left: ptr(-24);
				border-top: ptr(22.5) solid transparent;
				border-right: ptr(25) solid #ffffff;
				border-bottom: ptr(22.5) solid transparent;
			}
		}
	}

	&__quote {
		font-size: ptr(16);
		margin-bottom: ptr(11);
	}

	&__author-name {
		font-family: $tertiary-font;
		letter-spacing: $tertiary-font-letter-spacing;
		font-weight: bold;
		font-style: normal;
		font-size: ptr(12);
		text-transform: uppercase;
		color: $gray-dark;
	}

	&__carousel {
		display: inline-block;
		width: ptr(50);
		height: ptr(50);
		line-height: ptr(46);
		font-size: ptr(24);
		text-align: center;
		background-color: transparent;
		color: $gray-light;
		border: 2px solid #dddddd;
		margin-right: ptr(6);
		transition: $primary-transition;

		&:focus {
			color: $gray-light;
			border-color: #dddddd;
			background-color: transparent;
			text-decoration: none;
		}

		&:hover {
			color: $gray-dark;
			border-color: $gray-light;
			background-color: transparent;
			text-decoration: none;
		}

		&--left {
			padding-right: ptr(2);
		}

		&--right {
			padding-left: ptr(2);
			margin-right: 0;
		}

		&__container {
			display: inline-block;
			float: right;
			margin-top: ptr(-13);
			margin-bottom: ptr(9);
		}
	}
}

.widget-testimonials {
	margin-top: ptr(13);

	.widget-title {
		display: inline-block;
		margin-bottom: 0;
	}
}