.toolbar>section {
	backdrop-filter: contrast(calc(.9 + .05 * var(--brightness-multiplier))) blur(2px);
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	overflow: hidden;
	position: absolute;
	transition: scale 200ms;
	will-change: scale;
}

.toolbar :is(.left, .right) > :first-child {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.toolbar :is(.left, .right) > :last-child {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.toolbar :is(.bottom, .top) > :first-child {
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
}

.toolbar :is(.bottom, .top) > :last-child {
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}

.toolbar .bottom { bottom: 0 }
.toolbar .left { left: 0 }
.toolbar .right { right: 0 }
.toolbar .top { top: 0 }
.toolbar .center {
	display: flex;
	left: 0;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100vw;
	overflow: visible;
	/* overflow-x: auto; */
	right: 0;
	scrollbar-width: thin;
	width: fit-content;
}

.toolbar .middle {
	bottom: 0;
	height: fit-content;
	margin-bottom: auto !important;
	margin-top: auto !important;
	max-height: 100vh;
	overflow: visible;
	/* overflow-y: auto; */
	scrollbar-width: thin;
	top: 0;
}

.toolbar .island {
	box-shadow: 0 0 .5rem 0 hsl(0 0% calc(40% - 25% * var(--brightness-multiplier)) / 20%);
	margin: max(4px, .75vmin);
	transition: margin 100ms ease, scale 90ms ease-out;
	will-change: margin, scale;
}

.toolbar .island.bottom { transform-origin: bottom }
.toolbar .island.left { transform-origin: left }
.toolbar .island.right { transform-origin: right }
.toolbar .island.top { transform-origin: top }

#game-container[write][replaying] .toolbar>.left.middle,
#game-container:is(.input, .playing, [playing]) .toolbar .island { margin: /* clamp(-4px, -4%, -16px) */ -4% }

#toolbar.counter { counter-reset: index }
#toolbar.counter > :not(:hover)::after {
	bottom: 0;
	color: hsl(0 0% 50% / 25%);
	content: counter(index);
	counter-increment: index;
	font-size: .65em;
	margin: .15em;
	position: absolute;
	right: 0;
}

.toolbar button {
	background-color: transparent;
	border: none;
	color: currentColor;
	padding: .25rem 1rem;
}

.toolbar .toolbar-item {
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: thin;
	-webkit-user-select: none;
	align-items: center;
	aspect-ratio: 1;
	background-color: transparent;
	border: none;
	box-sizing: content-box;
	color: currentColor;
	display: flex;
	filter: drop-shadow(0px 0px .25rem hsl(0 0% calc(50% - 25% * var(--brightness-multiplier)) / 50%));
	font-size: .75rem;
	height: 2vmin;
	justify-content: center;
	line-height: 1rem;
	margin: 0;
	max-height: 1rem;
	min-height: 12px;
	outline: none;
	padding: 0.5rem;
	pointer-events: stroke;
	position: relative;
	text-align: center;
	touch-action: none;
	user-select: none;
}

.toolbar button,
.toolbar .toolbar-item {
	transition: background-color 40ms, font-size 200ms;
	will-change: background-color, font-size;
}

.toolbar .toolbar-item > svg {
	aspect-ratio: 1;
	height: 1em;
	width: 1em;
}

@media (hover:hover) {
	.toolbar button:hover,
	.toolbar .toolbar-item:hover {
		background-color: hsl(0 0% calc(44% - 27.5% * var(--brightness-multiplier)) / 60%);
	}

	/* -- experimental animations - add settings to enable/disable -- */
	.toolbar.scale>section:hover, .toolbar>section.scale:hover { scale: 1.05 }
	.toolbar .toolbar-item:hover:active { font-size: .5em }
	.toolbar .toolbar-item:hover:active>svg, .toolbar .toolbar-item:hover:active::before { scale: .8 }
	/* -- experimental animations end -- */
}

@media (hover:none) {
	.toolbar button:active,
	.toolbar .toolbar-item:active {
		background-color: hsl(0 0% calc(44% - 27.5% * var(--brightness-multiplier)) / 60%);
	}

	.toolbar.scale>section:active, .toolbar>section.scale:active, .toolbar>section:has(:active) { scale: 1.35 }
	.toolbar .toolbar-item:active { font-size: 1.5em }
	.toolbar .toolbar-item:active>svg, .toolbar .toolbar-item:active::before { scale: 1.5 }
}

.toolbar .toolbar-item:has(> input:checked):not(.playpause) { background-color: hsl(0 0% calc(35% - 10% * var(--brightness-multiplier)) / 50%) }
.toolbar .toolbar-item::before {
	transition: clip-path 200ms, font-size 200ms, scale 200ms;
	will-change: clip-path, font-size, scale;
}

.toolbar .toolbar-item>:not(input:first-child) {
	display: block;
	pointer-events: none;
	transition: scale 200ms;
	will-change: scale;
}

.toolbar-item.disabled {
	opacity: .5;
	pointer-events: none;
}

@media (hover:hover) {
	.toolbar-item.disabled:hover { cursor: not-allowed }

	[tooltip]:hover::after {
		/* -webkit-font-smoothing: subpixel-antialiased; */
		background-color: hsl(0 0% calc(50% - 40% * var(--brightness-multiplier)) / 75%);
		border: 1px solid var(--border-color);
		border-radius: .65em;
		padding: .65em .9em;

		color: var(--text-color);
		content: attr(tooltip);
		font-size: clamp(8px, 1.75vmin, 14px);
		/* font-weight: bold; */
		line-height: 100%;
		max-width: 20vw;
		min-width: 40px;
		pointer-events: none;
		position: absolute;
		text-overflow: ellipsis;
		width: max-content;
	}

	[tooltip][kbd]:hover::after {
		content: "[" attr(kbd) "] " attr(tooltip);
		text-transform: capitalize;
	}

	.toolbar .bottom .toolbar-item[tooltip]:hover::after { bottom: calc(100% + .75em) }
	.toolbar .left .toolbar-item[tooltip]:hover::after { left: calc(100% + .75em) }
	.toolbar .right .toolbar-item[tooltip]:hover::after { right: calc(100% + .75em) }
	.toolbar .top .toolbar-item[tooltip]:hover::after { top: calc(100% + .75em) }
}

.toolbar .toolbar-item:is(.backtrack, .playpause, .rewind)::before {
	background-color: currentColor;
	content: "";
	inset: .5rem;
	position: absolute;
}

.playpause::before {
	/* content: "▶"; */
	clip-path: polygon(
		10% 10%,
		50% 30%,
		50% 70%,
		50% 70%,
		50% 30%,
		90% 50%,
		90% 50%,
		10% 90%
	);
}

.playpause:has(> :checked)::before {
	clip-path: polygon(
		10% 10%,
		40% 10%,
		40% 90%,
		60% 90%,
		60% 10%,
		90% 10%,
		90% 90%,
		10% 90%
	);
}

.backtrack::before {
	clip-path: polygon(
		15% 10%,
		25% 10%,
		25% 50%,
		85% 10%,
		85% 90%,
		25% 50%,
		25% 90%,
		15% 90%
	);
}

.rewind::before {
	clip-path: polygon(
		0 10%,
		15% 10%,
		15% 50%,

		/* arrow left midway end */
		60% 10%,
		60% 50%,

		/* arrow left midway arrow left*/
		100% 10%,
		100% 90%,
		50% 50%,
		60% 50%,

		60% 90%,
		15% 50%,
		15% 90%,
		0 90%
	);
}

:has(#line-style .scenery > input[name=style]:checked) :is([data-tool=brush], [data-tool=line]),
.scenery { color: hsl(0 0% 50%) !important }
.wheel:active>svg { animation: rotate 1s ease }
:fullscreen .fullscreen > svg > path { d: path("M16 5H11V0M5 0V5H0M0 11H5V16M11 16V11H16") }

:has([data-options~=line-style] > input[name=tool]:checked) #line-style,
:has([data-options~=tool-settings] > input[name=tool]:checked) #tool-settings { display: contents !important }
#tool-options div { display: contents }

#game-container:not([write]) .toolbar>.left.middle>.toolbar-item:not([data-tool=camera], .change-vehicle),
#game-container[write]:not([replaying]) .toolbar>.bottom.center, /* No need for pause controls while playing */
#game-container:not([replaying]) .pip,
:has([data-options~=powerups]>input[name=tool]:not(:checked)) #powerups,
#game-container:not(.fullscreen-enabled) .toolbar-item.fullscreen,
:has([data-tool=eraser] > input[name=tool]:not(:checked)) #tool-options #eraser-options { display: none }