/* Controls floating over the fullscreen canvas. The container lets pointer events through to the canvas;
   only the control groups themselves take them. */

#overlay {
	position: fixed;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100% - 16px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Each group is a sunken tray, and whatever is on gets a raised cap behind its icon. Two shapes:
   - .segmented (chart style): pick one of two. A round pill, with one cap that slides to the chosen button.
   - .keys (heatmap, exchanges): each button on or off by itself. Rounded-square keys, each with its own cap.
     Square also fits the heatmap icon, which fills its 32px and would poke out of a circle. */
.overlay-group {
	--slot: 36px;
	--gap: 4px;
	display: flex;
	gap: var(--gap);
	padding: 4px;
	background: rgba(8, 9, 11, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: auto;
}

.overlay-group.segmented {
	position: relative;
	border-radius: 999px;
}

/* The key's 2px padding plus its 10px corner gives the tray's 12px, so the corners run parallel */
.overlay-group.keys {
	--slot: 40px;
	padding: 2px;
	border-radius: 12px;
}

.overlay-group button {
	appearance: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--slot);
	height: var(--slot);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

/* A touch drag across the exchange buttons sets them all (bridge.js), so it mustn't pan or scroll */
.overlay-group button[data-exchange] {
	touch-action: none;
}

.overlay-group button:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.55);
	outline-offset: 2px;
}

.segmented button {
	border-radius: 50%;
}

.keys button {
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.025);
}

/* The raised cap */
.segmented::before,
.keys button::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	background: linear-gradient(180deg, #2b2f37, #1c1f25);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

/* Hidden until the program has reported a style, then under whichever button is pressed */
.segmented::before {
	left: 4px;
	top: 4px;
	width: var(--slot);
	height: var(--slot);
	border-radius: 50%;
	opacity: 0;
	transition: transform 300ms cubic-bezier(0.3, 1.25, 0.5, 1), opacity 150ms;
}

.segmented:has(> [aria-pressed="true"])::before {
	opacity: 1;
}

.segmented:has(> :nth-child(2)[aria-pressed="true"])::before {
	transform: translateX(calc(var(--slot) + var(--gap)));
}

.keys button::before {
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 180ms;
}

.keys button[aria-pressed="true"]::before {
	opacity: 1;
}

/* The icons are 32px pixel art, shown at their full 32px. Pixelated keeps them sharp where the screen scales them
   up (2x displays). Icons of buttons that aren't pressed are faded, and keys that are off sit 1px lower. */
.overlay-group img {
	position: relative;
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
	opacity: 0.4;
	transition: opacity 120ms, transform 160ms;
}

.overlay-group button:hover img,
.overlay-group button[aria-pressed="true"] img {
	opacity: 1;
}

.keys button:not([aria-pressed="true"]) img {
	transform: translateY(1px);
}

/* Bigger targets for fingers */
@media (pointer: coarse) {
	.overlay-group {
		--slot: 40px;
	}

	.overlay-group.keys {
		--slot: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.segmented::before,
	.keys button::before,
	.overlay-group img {
		transition: none;
	}
}