// Details column.
.details-attributes__summary {
	cursor: pointer;
	position: relative;
	user-select: none;

	.column-details & {
		padding-right: 15px;
		position: relative;
	}

	details[open] & {
		margin-bottom: 15px;
	}

	&::marker,
	&::-webkit-details-marker {
		content: none;
		display: none;
	}
}

.column-details .notice details > summary {

	&::marker,
	&::-webkit-details-marker {
		content: none;
		display: none;
	}
}

.details-attributes__summary,
.toggle-stylesheet-details {

	&::after {
		background-image: url("../images/down-triangle.svg");
		background-position: center;
		background-size: cover;
		content: "";
		height: 6px;
		position: absolute;
		right: 0;
		top: 7px;
		width: 12px;
	}
}

tr.expanded .details-attributes__summary,
tr.expanded .toggle-stylesheet-details,
details[open] > .details-attributes__summary {

	&::after {
		transform: rotate(180deg);
	}
}

.notice .detailed {
	padding-left: 15px;

	details {
		padding-bottom: 16px;

		.detailed {
			padding-left: 32px;
		}
	}
}

dl.detailed {
	padding-bottom: 16px;

	dt {
		font-weight: 600;
		margin-bottom: 0.5em;
	}

	dd + dt {
		margin-top: 1em;
	}

	a {
		text-decoration: underline;
	}

	details > summary {
		cursor: pointer;
		user-select: none;
	}

	.element-attributes {

		th {
			font-weight: 600;
			text-align: right;

			&.has-attr-value::after {
				content: ":";
			}
		}

		th,
		td {
			padding: 2px;
			vertical-align: top;
		}
	}
}

.details-attributes__title,
.notice .detailed summary code {
	display: inline-block;
	font-weight: 600;
	margin-left: 18px;
	min-width: 240px;
}

.details-attributes__title {
	font-weight: 600;
	margin-left: 0;
}

.details-attributes__list {
	font-family: Consolas, Monaco, monospace;
	list-style: none;
	margin-top: 0;
	padding-left: 0;

	li {
		word-break: break-all;
	}
}

.details-attributes__attr {
	font-weight: 600;
}

.column-sources_with_invalid_output details {

	&[open] .details-attributes__summary {
		margin-bottom: 5px;
	}

	> div {
		padding-left: 25px;
	}
}
