colors and filters

front/sass/_toolbar.scss

@@ -7,14 +7,36 @@
 
     input.search{
         border-radius: 12px;
-        background: var(--background);
-        padding: 3px 10px;
+        background: var(--p20);
+        padding: 4px 10px;
         cursor: pointer;
-        filter: brightness(97%);
         border: none;
         font-size: 14px;
     }
 
+
+    .selected-filter{
+        font-size: 13px;
+        border-radius: 12px;
+        margin: 2px 0;
+        background: var(--p30);
+        padding: 3px 10px;
+        display: flex;
+        gap: 4px;
+        line-height: 22px;
+    }
+
+    .filter-input{
+
+        margin: 10px 0 ;
+        input{
+            font-size: 13px;
+        }
+    }
+
+    .applied-filter{
+        background: var(--p30);
+    }
 }
 .toolbar-filters{ display: flex;
     align-items: center;
@@ -28,7 +50,7 @@
     .applied-filter {
         font-size: 13px;
         border-radius: 12px;
-        background: var(--background);
+        background: var(--p20);
         padding: 3px 10px;
         display: flex;
         justify-content: center;
@@ -37,7 +59,6 @@
     }
 
     .applied-filter:hover {
-        opacity: .8;
-        background-color: #eee;
+        background-color: var(--p30);
     }
-}
+}