$o-testimonials-bp-medium:              900;
$o-testimonial-button-size:             32px;
$o-testimonial-button-offset:           space(3);
$o-testimonials-small-picture-size:     160px;
$o-testimonials-large-picture-size:     432px;
$o-testimonials-item-pad:               space(3);


.o-testimonials {
	position: relative;
	overflow: hidden; // needed because of sliding cards off screen causes unwanted scrollbar
}


.o-testimonials--no-items {
	&:before {
		display: none;
	}

	background-image: linear-gradient(palette(primary, 500) space(5), palette(primary, 600) calc(100% - #{space(5)}));
}


.o-testimonials__main {
	position: relative;
	z-index: 1;

	@include mq($max: $o-testimonials-bp-medium) {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: halve($o-testimonials-small-picture-size);
		background-image: linear-gradient(palette(primary, 500) space(5), palette(primary, 600) calc(100% - #{space(5)}));
	}

	@include contain($o-testimonials-bp-medium);
}


.o-testimonials__tray {
	position: relative;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;

	@include mq($max: $o-testimonials-bp-medium) {
		padding: space(3) 0;
		max-width: 440px;
	}

	@include mq($o-testimonials-bp-medium) {
		margin: 0 $o-testimonial-button-size + $o-testimonial-button-offset;

		&::before {
		    content: '';
		    position: absolute;
		    z-index: -1;
		    top: 50%;
		    bottom: -100%;
		    right: -100vw;
		    left: -100vw;
			background-image: linear-gradient(palette(primary, 500) space(5), palette(primary, 600) calc(100% - #{space(5)}));
		}
	}
}


.o-testimonials__button {
	position: absolute;
	z-index: 2;
	top: calc(50% - #{halve($o-testimonial-button-size)});
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: $o-testimonial-button-size;
	height: $o-testimonial-button-size;
	color: palette(primary, 500);
	background-color: palette(primary, 200);
	border: none;
	border-radius: 50%;
	transition: all 150ms linear;
	cursor: pointer;

	& svg {
		width: 12px;
		height: 12px;
	}

	&:hover {
		background-color: palette(secondary, 200);
		color: palette(secondary, 500);
	}

	&:active {
		background-color: palette(secondary, 400);
		color: palette(secondary, 200);
	}

	&:focus {
		outline: none;
	}

	&.is-previous {
		left: calc(#{column(1)} - #{halve($o-testimonial-button-size)});

		@include mq($o-testimonials-bp-medium) {
			left: -1 * ($o-testimonial-button-size + $o-testimonial-button-offset);
		}
	}

	&.is-next {
		right: calc(#{column(1)} - #{halve($o-testimonial-button-size)});

		@include mq($o-testimonials-bp-medium) {
			right: -1 * ($o-testimonial-button-size + $o-testimonial-button-offset);
		}
	}
}


.o-testimonials__item {
	opacity: 0; // hide by default
	grid-row: 1;
	grid-column: 1;
	z-index: 0;
	padding-top: 20px; // for shadow
	transition: transform 650ms cubic-bezier(0.37, 0.16, 0.21, 1),
				opacity 650ms cubic-bezier(0.37, 0.16, 0.21, 1);
	transition-delay: 0s, 0s;

	&.is-previous {
		transform: translateX(-140px) scale(0.8);
		transition-delay: 0s, 0.3s;
	}

	&.is-next {
		transform: translateX(140px) scale(0.8);
		transition-delay: 0s, 0.3s;
	}

	&.is-active {
		opacity: 1;
		transform: none;
		z-index: 1;
	}
}


.o-testimonials__card {
	background: palette(neutral, 0);
	box-shadow: 0 20px 48px 0 rgba(0,0,0,0.20);

	@include mq($max: $o-testimonials-bp-medium) {
		margin: 0 column(1);
		padding: $o-testimonials-item-pad;
		border-radius: map_get($border-radius, s) map_get($border-radius, s) map_get($border-radius, l) map_get($border-radius, xs);
	}

	// Picture and content side by side
	@include mq($o-testimonials-bp-medium) {
		position: relative;
		display: flex;
		border-radius: map_get($border-radius, s) map_get($border-radius, xs) map_get($border-radius, xl) map_get($border-radius, s);

		&::before {
		    content: '';
		    position: absolute;
		    z-index: -1;
		    bottom: 48px;
		    left: -60px;
			width: 88px;
			height: 88px;
			background-image: url(/img/plane-ornament-1.svg);
		}
		&::after {
			content: '';
			position: absolute;
			z-index: -1;
			bottom: 136px;
			right: -16px;
			width: 32px;
			height: 32px;
			background-image: url(/img/plane-ornament-2.svg);
		}
	}
}


.o-testimonials__picture-small {
	display: block;
	width: $o-testimonials-small-picture-size;
	height: $o-testimonials-small-picture-size;
	pointer-events: none;

	@include mq($max: $o-testimonials-bp-medium) {
		margin-top: calc(-1 * (#{$o-testimonials-item-pad} + #{space(3)} + #{halve($o-testimonials-small-picture-size)}));
		margin-left: auto;
		margin-right: auto;
	}

	& img {
		border-radius: map_get($border-radius, xs);
		object-fit: cover;
	}

	// hide small image on large viewports
	@include mq($o-testimonials-bp-medium) {
		display: none;
	}
}


.o-testimonials__picture-large {
	border-top-left-radius: map_get($border-radius, s);
	border-bottom-left-radius: map_get($border-radius, s);
	flex: 1 1 $o-testimonials-large-picture-size;
	overflow: hidden;
	pointer-events: none;

	@include mq($max: $o-testimonials-bp-medium) {
		display: none;
	}

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


.o-testimonials__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 55%;

	@include mq($o-testimonials-bp-medium) {
		padding: space(6);
	}
}


.o-testimonials__name{
	@include font-weight(extraBold);
	margin-top: space(1);
	color: palette(primary, 500);
}


.o-testimonials__subtitle {
	@include font-weight(extraBold);
}


.o-testimonials__description {
	margin-top: space(4);
	margin-bottom: space(3);
}


.o-testimonials__more {
	margin-top: auto;
}


// Footer includes feedback rating & button
.o-testimonials__footer {
	@include contain;
	padding-bottom: space(5);
	color: palette(neutral, 0);

	@include mq($max: $o-testimonials-bp-medium) {
		text-align: center;
	}

	@include mq($o-testimonials-bp-medium) {
		display: flex;
		padding: space(10) 0 space(10) space(15);
	}
}


.o-testimonials__feedback {
	display: inline-flex;
	flex-direction: column;

	@include mq($o-testimonials-bp-medium) {
		flex: 1 1 column(4);
	}
}


.o-testimonials__rating {
	display: flex;
	margin-top: space(3);
}


.o-testimonials__cta {
	@include mq($max: $o-testimonials-bp-medium) {
		margin-top: space(5);
	}
	@include mq($o-testimonials-bp-medium) {
		flex: 1 1 column(8);
	}
}

.o-testimonials__cta-heading {
	@include font-size(l);
	@include font-weight(extraBold);
	margin-bottom: space(3);
}