hidden shit, and online status bars, search settings

src/app/features/settings/styles.css.ts

@@ -1,6 +1,27 @@
 import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { color, config } from 'folds';
 
 export const SequenceCardStyle = style({
   padding: config.space.S300,
 });
+
+export const SettingsSearchResult = style({
+  width: '100%',
+  textAlign: 'left',
+  cursor: 'pointer',
+  border: 'none',
+  background: 'transparent',
+  padding: `${config.space.S200} ${config.space.S300}`,
+  borderRadius: config.radii.R400,
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: config.space.S200,
+  selectors: {
+    '&:hover': {
+      backgroundColor: color.Background.ContainerHover,
+    },
+    '&[aria-pressed="true"]': {
+      backgroundColor: color.Background.ContainerActive,
+    },
+  },
+});