.c-details {
	padding: $details--padding 0;
	border-style: solid;
	border-color: $details--border-color;
	border-width: $details--border-width 0;
	/* In case it’s a list item */
	list-style: none;
}

.c-details + .c-details {
	/* for successive details instances, don't double the border */
	border-top: 0;
	margin-top: $details--spacing;
}

.c-details__details {
	/* For IE11 (unknown element) */
	display: block;
}

.c-details__summary {
	cursor: pointer;
	/* For IE11 (unknown element) */
	display: block;
	/* remove marker in Firefox */
	list-style-type: none;
}

/* remove marker in other browsers */
.c-details__summary::marker,
.c-details__summary::-webkit-details-marker {
	display: none;
}

/* enhance focus styles */
@supports (text-decoration-color: #000) {
	.c-details__summary:focus {
		outline: none;
	}

	.c-details__summary:focus .c-details__title {
		text-decoration: underline;
		text-decoration-color: $details--focus-underline-color;
		text-decoration-thickness: 3px;
	}
}

.c-details__header {
	display: flex;
	align-items: baseline;
}

.c-details__header .u-icon {
	flex-shrink: 0;
	width: $details--icon-size;
	height: $details--icon-size;
	color: $details--icon-color;
}

/* ↓ Complex selector necessary to ensure
nested icons are not rotated */
.c-details > [open] > summary > div > .u-icon {
	transform: rotate(90deg);
}

.c-details__title {
	margin-left: $details--icon-margin;
	font-family: $details--title-font-family;
	font-size: $details--title-font-size;
	color: $details--title-color;
	line-height: 1.25;
}

.c-details__content {
	padding: $details--content-padding;
}

/* Remove excess margin from (for example) paragraphs */
.c-details__content > :last-child {
	margin-bottom: 0;
}
