/* # Sections */

super-secret-settings {
	position: fixed;
	top: 5px;
	left: 5px;
	width: 400px;
	fill: white;
	color: white;
	z-index: 1000;
	border: solid 1px white;
	background-color: rgb(0, 102, 204);
	box-shadow:
		0 0 0 5px black,
		0 0 40px 10px rgba(0, 0, 0, .4);
}

/* ## Header */

super-secret-settings section.header {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr repeat(2, var(--running-size));
	height: var(--running-size);
	cursor: grab;
}

super-secret-settings:not(.collapsed) section.header {
	border-bottom: solid 1px white;
}

super-secret-settings section.header:active {
	cursor: grabbing;
}

super-secret-settings section.header p {
	pointer-events: none;
	padding: 0 var(--padding);
}

super-secret-settings section.header svg {
	width: calc(var(--padding) * 1.5);
	margin: auto;
}

super-secret-settings section.header button {
	height: 100%;
	border-left: solid 1px white;
}

super-secret-settings.collapsed section.header button.collapse svg {
	transform: rotate(-90deg);
}

/* ## Body */

super-secret-settings section.body {
	padding: var(--padding);
}

super-secret-settings.collapsed section.body {
	display: none;
}