/* # Sections */

super-secret-settings {
	--border-width: 5px;

	position: fixed;
	top: var(--border-width);
	left: var(--border-width);
	width: 400px;
	fill: white;
	color: white;
	z-index: 1000;
	border: solid 1px white;
	background-color: rgb(0, 102, 204);
	box-shadow:
		0 0 0 var(--border-width) black,
		0 0 40px calc(var(--border-width) * 2) 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;
}

/* # Size queries */

@media not (hover: hover), (max-width: 900px) {
	super-secret-settings {
		top: unset;
		bottom: 5px;
		width: calc(100% - (var(--border-width) * 2));
		transform: translate(0, 0) !important;
	}
}