.accordion {
	margin-bottom: var(--component-gap);
}

details {
	padding-top: 1.5rem;
	padding-right: 1rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-primary);
}

details:first-of-type {
	border-top: 1px solid var(--color-primary);
}

details *:last-child {
	margin-bottom: 0;
}

summary {
	padding-right: 1.75rem;
	display: block;
	color: var(--color-primary);
	font: var(--xl-bold);
	border: none;
	background-size: 1rem;
	background-repeat: no-repeat;
	background-position: right center;
	background-image: url(/assets/icons/caret-down.svg);
	cursor: pointer;
}

details[open] summary {
	background-image: url(/assets/icons/caret-up.svg);
}

summary:focus-visible {
	border: none;
	outline: 2px solid var(--color-primary);
}

.accordion-faq details {
	padding: 1rem;
	color: var(--black);
	border-bottom: 1px solid var(--black-30);
	background-color: var(--color-primary--light);
}

.accordion-faq details:first-of-type {
	border-top: 1px solid var(--black-30);
}

.accordion-faq summary {
	padding-left: 3rem;
	color: var(--black);
	background-image: url(/assets/icons/question.svg), url(/assets/icons/caret-down.svg);
	background-size: 2rem, 1.5rem;
	background-repeat: no-repeat, no-repeat;
	background-position: 0 center, right center;
}

.accordion-faq details[open] summary {
	background-image: url(/assets/icons/question.svg), url(/assets/icons/caret-down.svg);
}