/** biome-ignore-all lint/correctness/noUnknownTypeSelector: gtk css has more valid identifiers */
* {
	all: unset;
}

window {
	background-color: #191919c6;
	color: #ffffff;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 14px;
	font-family:
		"Hack Nerd Font Mono", "Font Awesome 7 Brands", "Font Awesome 7 Free",
		sans-serif;
}

popover {
	margin-top: 4px;
	font-family:
		"Hack Nerd Font Mono", "Material Icons", "Font Awesome 7 Free", sans-serif;
	padding: 6px;
	border-radius: 8px;

	background: rgba(25, 25, 25, 0.8);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(57, 57, 57, 0.71);
	font-size: 14px;
}

tooltip {
	background-color: #222222;
	color: #ffffff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
}

button {
	font-family: "Material Icons", sans-serif;
	font-size: 20px;
}

#spacer {
	font-weight: 900;
	padding: 0 5px;
	text-shadow: 0 0 5px #ffffffaa;
}

.button {
	padding: 4px 8px;
	border-radius: 4px;
	font-family: "Material Icons", sans-serif;
}

.button:hover {
	background-color: #111111;
}

.workspace-pill {
	padding: 2px 5px;
	margin-right: 6px;
	border-radius: 5px;
	text-shadow: 0 0 2px #646464;
	transition:
		background-color 0.2s,
		color 0.2s,
		box-shadow 0.2s;
}

.workspace-pill:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.workspace-pill-active {
	background-color: #666666;
}

.workspace-pill-focused {
	background-color: #ffffff;
	color: #1e1e1e;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.workspace-pill-focused:hover {
	box-shadow: none;
}

.workspace-pill-urgent {
	background-color: #ff5555;
	color: #fff;
	animation: workspace-blink 1s linear infinite;
}

.workspace-pill-six {
	animation: workspace-updown 1.2s ease-in-out infinite;
	margin-left: -4px;
	margin-top: 4px;
	font-size: 12px;
}

.workspace-pill-seven {
	animation: workspace-updown 1.2s ease-in-out infinite;
	animation-delay: 0.6s;
	margin-right: -4px;
	margin-top: 4px;
	font-size: 12px;
}

@keyframes workspace-updown {
	0% {
		transform: translateY(4px);
	}

	50% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(4px);
	}
}

@keyframes workspace-blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

.battery-widget {
	padding: 2px 6px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.04);
}

.battery-widget-icon {
	min-width: 7ch;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.08ch;
}

.battery-widget-text {
	font-weight: 500;
}

.battery-widget-normal {
	background-color: rgba(120, 120, 120, 0.18);
}

.battery-widget-full {
	background-color: rgba(76, 129, 76, 0.24);
}

.battery-widget-full .battery-widget-icon {
	color: #bdf5bd;
}

.battery-widget-charging {
	background-color: rgba(76, 129, 76, 0.28);
}

.battery-widget-charging .battery-widget-icon {
	color: #9df19d;
	animation: battery-charge-glow 1.4s ease-in-out infinite;
}

.battery-widget-low {
	background-color: rgba(148, 61, 61, 0.28);
}

.battery-widget-low .battery-widget-icon {
	color: #ff8585;
	animation: battery-low-blink 1s steps(2, start) infinite;
}

.battery-widget-external {
	background-color: rgba(100, 100, 100, 0.18);
}

.battery-widget-external .battery-widget-icon {
	color: #d7d7d7;
}

@keyframes battery-charge-glow {
	0% {
		opacity: 0.7;
		transform: translateX(0);
	}

	50% {
		opacity: 1;
		transform: translateX(1px);
	}

	100% {
		opacity: 0.7;
		transform: translateX(0);
	}
}

@keyframes battery-low-blink {
	0% {
		opacity: 1;
	}

	49% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}

	100% {
		opacity: 0.4;
	}
}