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

:host {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.btn-help {
	position: absolute;
	top: 16px;
	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;
	right: 16px;
}