.accordion {
	width: 100%;
}

.accordion button * {
	cursor: pointer;
}

.accordion-cb {
	display: none;
}

.accordion.medium > button {
	font-size: 1.2em;
}

.accordion.small > button {
	font-size: 0.8em;
}

.accordion .label {
	margin-left: 10px;
}

.accordion button {
	width: 100%;
	display: flex;
	justify-content: left;
	padding: 0.5em 0;
}

.accordion button:hover {
	background: #373b43;
}

.accordion > .accordion-summary {
	margin: 0 24px 0.5em;
}

.accordion > .accordion-content {
	margin: 0.5em 22px 0;
	padding-bottom: 0;
}

.accordion > button .accordion-caret {
	transform: rotate(-90deg) translate(0.1em);
	flex-basis: 1.5em;
}

.accordion input:checked + button .accordion-caret {
	transform: rotate(0) translate(0, 0.2em);
}

.accordion input:not(:checked) ~ .accordion-content {
	display: none;
}

input:checked ~ .accordion-content {
	display: block;
}

/** Animations */
.accordion.enter-active > button .accordion-caret {
	animation-duration: 200ms;
	animation-name: rotate-icon;
}

.accordion.exit-active > button .accordion-caret {
	animation-duration: 200ms;
	animation-name: rotate-icon;
	animation-direction: reverse;
}

.accordion.enter-active > .accordion-content {
	overflow: hidden;
	animation-duration: 500ms;
	animation-name: open-content;
}

.accordion.exit-active > .accordion-content {
	/* stylelint-disable-next-line declaration-no-important */
	display: block !important;
	overflow: hidden;
	animation-duration: 500ms;
	animation-name: open-content;
	animation-direction: reverse;
	max-height: 0;
}
