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

/* variable */
:root {
	--icon-font-material: "Material Icons", sans-serif;
	--icon-font-awesome: "Font Awesome 7 Free", sans-serif;
	--text-font: "Hack Nerd Font Mono", sans-serif;
	--text-font-mono: "Hack Nerd Font Mono", monospace;
}

window {
	background-color: #191919c6;
	color: #ffffff;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 2px;
	font-size: 14px;
	font-family: var(--text-font);
}

popover {
	margin-top: 4px;
	font-family: var(--text-font);
	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;
}

.control-center-popover {
	padding: 12px;
	background-color: rgba(25, 25, 25, 0.95);
}

.control-center-spotify-container {
	border: 1px solid rgba(80, 80, 80, 0.8);
	border-radius: 8px;
	background: rgba(30, 30, 30, 0.95);
}

.control-center-spotify-artist-label {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.45);
	/* bold text shadow */
	text-shadow: 0 0 5px #000000aa;
}

.control-center-spotify-title-label {
	font-size: 12px;
	color: #cccccc;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
	/* bold text shadow */
	text-shadow: 0 0 5px #000000aa;
}

.control-center-seek-bar {
	min-height: 6px;
	min-width: 120px;
	margin: 0 6px;
}

.control-center-seek-bar trough {
	background-color: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	min-height: 6px;
	min-width: 120px;
}

.control-center-seek-bar highlight {
	background-color: rgba(255, 255, 255, 0.65);
	border-radius: 999px;
}

.control-center-seek-bar slider {
	background-color: #ffffff;
	border-radius: 999px;
	min-width: 10px;
	min-height: 10px;
}

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

button {
	font-size: 20px;
	padding: 3px 6px;
}

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

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

.flat-button {
	background-color: #333333;
	color: #ffffff;
	padding: 2px 4px;
	border-radius: 10px;
}

.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-alive {
	background-color: rgba(255, 255, 255, 0.153);
	color: #ffffff;
}

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

.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;
}

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

@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;
	}
}