Cowboy prototyping

studio-frontend/src/app/app.element.scss

@@ -10,6 +10,91 @@
 	right: 16px;
 }
 
+.toolbar {
+	display: flex;
+	gap: 16px;
+	position: absolute;
+	top: 16px;
+	left: 50%;
+	transform: translateX(-50%);
+	mix-blend-mode: multiply;
+}
+
+.toolbar-group {
+	display: flex;
+	gap: 2px;
+	mix-blend-mode: multiply;
+}
+
+.btn-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	font-size: 15px;
+	padding: 10px 12px;
+	pointer-events: auto;
+
+	// TODO: Copypasta
+	background: #0006;
+	color: #FFFC;
+	backdrop-filter: blur(16px);
+	transition: {
+		property: background, color;
+		duration: 0.1s;
+		timing-function: linear;
+	}
+	mix-blend-mode: multiply;
+
+	&:first-child {
+		border: {
+			top-left-radius: 8px;
+			bottom-left-radius: 8px;
+		}
+	}
+
+	&:last-child {
+		border: {
+			top-right-radius: 8px;
+			bottom-right-radius: 8px;
+		}
+	}
+
+	&:hover {
+		background: #0008;
+		color: #FFF;
+	}
+
+	&:has(:checked) {
+		background: #7A2C34E3;
+		color: #FFF;
+		background-blend-mode: multiply;
+
+		&:hover {
+			background: #90363F;
+		}
+	}
+
+	&:has(:disabled) {
+		background: #0003 !important;
+		color: #FFF6 !important;
+	}
+
+	input {
+		display: block;
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		opacity: 0;
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+	}
+}
+
 .help {
 	position: absolute;
 	top: 60px;