event filter styling, add toggler button styling

web/src/css/button.scss

@@ -4,8 +4,8 @@ button,
   align-items: center;
   gap: var(--spacing-s);
   border-radius: 10rem;
-  background: var(--color-cta-background);
-  color: var(--color-cta-text);
+  background: var(--color-button-bg);
+  color: var(--color-button-fg);
   border: none;
   padding: var(--spacing-xs) var(--spacing-s);
   margin: 0 0 var(--spacing-xs);
@@ -31,8 +31,8 @@ button,
   }
 
   &.secondary {
-    color: var(--color-deepBrick);
-    background: var(--color-goldenBeige);
+    --color-button-bg: var(--color-goldenBeige);
+    --color-button-fg: var(--color-deepBrick);
   }
 
   &.tertiary {
@@ -41,4 +41,48 @@ button,
     border: 2px solid currentColor;
     padding: .25rem .75rem;
   }
+
+  &.toggler {
+    --color-button-bg: var(--color-chateauBlue);
+    --color-button-fg: var(--color-chateauBlue);
+    background: transparent;
+    border: 2px solid var(--color-button-bg);
+    padding: .25rem .5rem .25rem .75rem;
+    position: relative;
+
+    &:after {
+      content: "";
+      width: 1rem;
+      height: 1rem;
+      border-radius: 1rem;
+      background: var(--color-white);
+      border: 2px solid var(--color-button-bg);
+    }
+
+    &[data-active=true] {
+      --color-button-bg: var(--color-chateauBlue);
+      --color-button-fg: var(--color-white);
+      background: var(--color-button-bg);
+
+      &:after {
+        content: "";
+        width: 1rem;
+        height: 1rem;
+        border-radius: 1rem;
+        background: var(--color-white);
+        border: 2px solid var(--color-button-bg);
+      }
+
+      &:before {
+        content: "";
+        width: .4rem;
+        height: .2rem;
+        border-bottom: 3px solid var(--color-button-bg);
+        border-left: 3px solid var(--color-button-bg);
+        position: absolute;
+        right: .8rem;
+        transform: rotate(-45deg);
+      }
+    }
+  }
 }

web/src/css/variables.scss

@@ -39,8 +39,8 @@
   --color-text: var(--color-chateauBlue);
   --color-background: var(--color-betongGray);
   --color-background-secondary: var(--color-betongGray-darkened);
-  --color-cta-background: var(--color-goldenOrange);
-  --color-cta-text: var(--color-black);
+  --color-button-bg: var(--color-goldenOrange);
+  --color-button-fg: var(--color-black);
   --color-placeholder: var(--color-neufPink);
   --color-menu-text: var(--color-deepBrick);
   --color-menu-background: var(--color-goldenBeige);