fix: tooltips can show if one button is focused & another is hovered

src/components/FlickerList.tsx

@@ -42,14 +42,14 @@ const Flicker: React.FC<{
 			className={css`
 				position: relative;
 
-				& button:focus ~ .tooltip,
+				&&& button:focus ~ .tooltip,
-				& button:hover ~ .tooltip {
+				&&& button:hover ~ .tooltip {
 					opacity: 1;
 				}
 
-				& button:focus,
+				&&& button:focus,
-				& button:hover {
+				&&& button:hover {
-					opacity: 1 !important;
+					opacity: 1;
 				}
 			`}>
 			<button
@@ -138,7 +138,14 @@ const FlickerList: React.FC<{
 
 				&:has(> li button:focus) li button:not(:focus),
 				&:has(> li button:hover) li button:not(:hover) {
-					opacity: 0.5 !important;
+					opacity: 0.5;
+				}
+
+				/* any button that has a subsequent button focused, hide its tooltip */
+				&&&& li:has(~ li button:focus) .tooltip,
+				/* any button that has a previous button focused, hide its tooltip */
+				&&&& li:has(button:focus) ~ li .tooltip {
+					opacity: 0;
 				}
 			`}>
 			{[

src/index.css

@@ -4,7 +4,7 @@
 	--card-tags: rgb(34, 34, 34);
 	--card-tags-hover: rgb(25, 25, 25);
 	--primary-colour: rgb(255, 85, 85);
-	--text-colour: rgb(211, 207, 201);
+	--text-colour: rgb(210, 210, 210);
 	--text-subdued: rgb(150, 150, 150);
 	--card-active: rgb(45, 45, 45);
 	--card-active-border: rgb(60, 60, 60);