updating fir news pages filters

resources/css/components/filters-toolbar.css

@@ -1,9 +1,39 @@
 .filters-toolbar {
   @apply flex
   flex-col
-  items-center
+  justify-center
   md:flex-row 
+  flex-wrap
   container
   mx-auto 
-  gap-x-8 gap-y-3 p-0 py-8;
+  gap-x-4 gap-y-3 p-0 py-8;
+  li {
+    @apply h-auto;
+  }
+  &__action-button {
+    @apply bg-white shadowed py-3 px-6 rounded-xl 
+    font-semibold 
+    flex 
+    justify-center
+    items-center
+    gap-3
+    w-fit
+    h-full;
+    outline-offset: 0 !important;
+    transition: transform 0.2s ease-in-out;
+    &:hover {
+      @apply text-secondary;
+      transform: scale(1.02) translateY(-2px);
+    }
+    .icon {
+      @apply h-6 w-6 object-contain object-right;
+    }
+    .name {
+      @apply block;
+    }
+  }
+  &__action-button--active {
+    @apply text-secondary;
+    outline: transparent;
+  }
 }