$c-faq-bp1: 480;

.c-faq {
	@include border-radius(m);
	padding: space(2) space(2) space(3);
	box-shadow: 2px 2px 32px -8px rgba(51,51,51,0.26);
	background-color: palette(neutral, 0);

	@include mq($c-faq-bp1) {
		padding: space(2) space(5) space(3);
	}
}


.c-faq__title {
	@include font-size(xl);
	@include font-family(primary);
	@include font-weight(bold);
	margin-bottom: space(3);
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.c-faq__icon {
	flex: none;
	width: 64px;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;

	@include mq($c-faq-bp1) {
		transform: translateX(space(2)) scale(1.25);
	}
}


.c-faq__list {
	list-style: none;
	margin-left: 0;
}


.c-faq__item {
	border-bottom: 2px solid rgba(palette(secondary, 400), 0.3);
}


.c-faq__question {
	@include font-weight(bold);
	@include font-size(base);
	display: flex;
	justify-content: space-between;
	padding: space(3) 0;
	cursor: pointer;
	transition: color 250ms linear;

	&:hover {
		color: palette(primary, 500);
	}

	&::after {
		flex: none;
		content: '';
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		background-image: url('/img/button-plus.svg');
		background-repeat: no-repeat;
		margin-left: space(2);

		.c-faq__item.is-active & {
			background-image: url("/img/button-minus.svg");
		}
	}
}

// Hidden by default
//.c-faq__answer {
//	$o-faq-answer-toggle-speed: 200ms;
//	$o-faq-answer-fade-speed: 200ms;
//	$o-faq-answer-open-ease: cubic-bezier(0,0,1,0.15);
//	$o-faq-answer-close-ease: cubic-bezier(0,0.5,0.5,1);
//	opacity: 0;
//	max-height: 0;
//	overflow: hidden;
//	padding-right: 24px + space(2);
//	transform: translateX(55px);
//	// close animation
//	transition: opacity $o-faq-answer-fade-speed ease-out,
//				padding $o-faq-answer-toggle-speed $o-faq-answer-close-ease $o-faq-answer-fade-speed,
//				transform $o-faq-answer-toggle-speed $o-faq-answer-close-ease $o-faq-answer-fade-speed,
//				max-height $o-faq-answer-toggle-speed $o-faq-answer-close-ease $o-faq-answer-fade-speed;
//
//
//	.c-faq__item.is-active & {
//		opacity: 1;
//		max-height: 300px;
//		padding-bottom: space(3);
//		transform: none;
//		// open animation
//		transition: max-height $o-faq-answer-toggle-speed $o-faq-answer-open-ease,
//					padding $o-faq-answer-toggle-speed $o-faq-answer-open-ease,
//					transform $o-faq-answer-toggle-speed $o-faq-answer-open-ease,
//					opacity $o-faq-answer-fade-speed ease-out $o-faq-answer-toggle-speed;
//
//	}
//}

.c-faq__answer {
	display: none;
	padding-right: 24px + space(2);
	padding-bottom: space(3);

	.c-faq__item.is-active & {
		display: block;

	}
}