From 715996aceb4d4dc96410464f60727b98a289be08 Mon Sep 17 00:00:00 2001
From: Josh Kingsley <josh@joshkingsley.me>
Date: Thu, 30 Oct 2025 13:25:02 +0200
Subject: refactor(web): move selection code

---
 web/src/components/toolbar/index.css | 78 ++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 38 deletions(-)

(limited to 'web/src/components/toolbar/index.css')

diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css
index b580fbf..e082f7d 100644
--- a/web/src/components/toolbar/index.css
+++ b/web/src/components/toolbar/index.css
@@ -1,44 +1,46 @@
-ntv-toolbar {
-  display: flex;
-  border-radius: 99999px;
-  background: var(--color-neutral-900);
-  width: min-content;
-}
+@layer components {
+  ntv-toolbar {
+    display: flex;
+    border-radius: 99999px;
+    background: var(--color-neutral-900);
+    width: min-content;
+  }
 
-ntv-toolbar > section {
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.325rem;
-}
+  ntv-toolbar > section {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.325rem;
+  }
 
-ntv-toolbar button {
-  border-radius: 99999px;
-  background: var(--color-neutral-800);
-  padding: 0 0.5rem;
-  height: 1.25rem;
-  color: white;
-  font-size: 0.75rem;
-}
+  ntv-toolbar button {
+    border-radius: 99999px;
+    background: var(--color-neutral-800);
+    padding: 0 0.5rem;
+    height: 1.25rem;
+    color: white;
+    font-size: 0.75rem;
+  }
 
-ntv-toolbar button:hover {
-  background: var(--color-neutral-700);
-}
+  ntv-toolbar button:hover {
+    background: var(--color-green-400);
+  }
 
-ntv-toolbar button[data-variant="icon"] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1;
-  height: 1.25rem;
-}
+  ntv-toolbar button[data-icon] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    aspect-ratio: 1;
+    height: 1.25rem;
+  }
 
-ntv-toolbar input {
-  border: 1px solid var(--color-neutral-700);
-  border-radius: 4px;
-  background: var(--color-neutral-900);
-  width: 2.5rem;
-  height: 1.25rem;
-  color: white;
-  font-size: 0.75rem;
-  text-align: center;
+  ntv-toolbar input {
+    border: 1px solid var(--color-neutral-700);
+    border-radius: 4px;
+    background: var(--color-neutral-900);
+    width: 2.5rem;
+    height: 1.25rem;
+    color: white;
+    font-size: 0.75rem;
+    text-align: center;
+  }
 }
-- 
cgit v1.2.3