.c-faq {

}


.c-faq__header {
	@include font-size(m);
	@include font-weight(extraBold);
	color: palette(neutral, 700);
	margin-bottom: space(6);
}


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


.c-faq__item {
	border-bottom: 1px solid palette(primary, 200);
	max-width: 45em;
}


.c-faq__label {
	display: flex;
	cursor: pointer;
	padding: space(2) 0;
}


.c-faq__number {
	margin-right: space(2);
}


.c-faq__heading {
	@include font-size(base);
	@include font-weight(semiBold);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: palette(neutral, 700);
	transition: color 150ms linear;

	.c-faq__label:hover & {
		color: palette(primary, 500);
	}

	.c-faq__label.is-active & {
		@include font-weight(extraBold);
		color: palette(primary, 500);
	}
}


.c-faq__arrow {
	flex: none;
	color: palette(primary, 400);
	transition: transform 150ms ease-in-out;

	.c-faq__label.is-active & {
		transform: rotate(-0.25turn);
	}
}


.c-faq__content {
	max-height: 0;
	opacity: 0;
	padding: 0;
	pointer-events: none; // Needed so we don't click on it when it is hidden
	transition: all 250ms ease-in-out;

	.is-active ~ & {
		padding-top: space(2);
		padding-bottom: space(4);
		max-height: 1000px;
		opacity: 1;
	}
}

.c-faq__action {
	margin-top: space(6);
}