$c-accordion-left-offset: space(10);

.c-accordion {

}


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


.c-accordion__item {
	padding: space(2) 0;
	margin-left: $c-accordion-left-offset;
	border-top: 1px solid palette(neutral, 300);

	&:last-child {
		border-bottom: 1px solid palette(neutral, 300);
	}
}


.c-accordion__label {
	display: flex;
	margin-left: -$c-accordion-left-offset;
	cursor: pointer;
	text-decoration: none;
}


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


.c-accordion__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: palette(primary, 500);
	transition: color 150ms linear;

	.c-accordion__label:hover & {
		color: palette(primary, 700);
	}
}

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

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


.c-accordion__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(3);
		padding-bottom: space(7);
		max-height: 1000px;
		opacity: 1;
		pointer-events: all;
	}
}