.c-faq {

}

.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(18);
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: palette(text, 600);
	transition: color 150ms linear;

	.c-faq__label:hover & {
		color: palette(text, 400);
	}

	.c-faq__label.is-active & {
		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-bottom: space(3);
		max-height: 1000px;
		opacity: 1;
		pointer-events: all;
	}
}

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