.accordion {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 2rem;
}
@media only screen and (max-width: 1000px) {
	.accordion {
		gap: 1rem;
	}
}

.accordion > .item.box,
.accordion > .wrapper > .item.box {
	justify-content: flex-start;
	align-items: stretch;
	gap: 0;
	
	padding: 0;
	
	overflow: hidden;
	text-align: left;
}



.accordion > .item.box > .head,
.accordion > .wrapper > .item.box > .head {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1.5rem;
	
	padding: 1rem 2rem;
	
	/* HACK: This is equal to an `outline-bottom` */
	border-bottom: 0.125rem solid var(--color-gray-dark-dark);
	margin-bottom: -0.125rem;
}
.accordion > .item.box > .head:hover,
.accordion > .wrapper > .item.box > .head:hover {
	cursor: pointer;
}

.accordion > .item.box > .head > .icon,
.accordion > .wrapper > .item.box > .head > .icon {
	color: var(--theme);
}
.accordion > .item.box > .head > .title,
.accordion > .wrapper > .item.box > .head > .title {
	flex-grow: 1;
	
	justify-content: flex-start;
}

@media only screen and (max-width: 1000px) {
	.accordion > .item.box > .head > .icon,
	.accordion > .wrapper > .item.box > .head > .icon,
	.accordion > .item.box > .head > .title,
	.accordion > .wrapper > .item.box > .head > .title {
		font-size: 1rem;
	}
	
	.accordion .head > .title .copylink {
		/* HACK: Fix copylink positioning */
		top: -0.35rem;
	}
}



.accordion > .item.box > .body-container,
.accordion > .wrapper > .item.box > .body-container {
	transition: max-height 0.5s ease-out;
}

.accordion > .item.box:not(.open) > .body-container,
.accordion > .wrapper > .item.box:not(.open) > .body-container {
	max-height: 0;
}

.accordion > .item.box > .body-container > .body,
.accordion > .wrapper > .item.box > .body-container > .body {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 1rem;
	
	padding: 2rem;
}