colors and filters

front/sass/_button.scss

@@ -1,35 +1,49 @@
 .button{
   border-radius: 12px;
-  background: var(--background-button);
+  background: var(--p20);
   padding: 3px 10px;
   cursor: pointer;
-  border: 1px solid var(--border-color);
+  border: 0px solid var(--p30);
   font-size: 14px;
   min-height: 27px;
   display: flex;
   align-items: center;
   gap: 4px;
+  color: var(--text);
 
-  &.secondary{
-    background: var(--secondary);
-  }
-  &.primary{
-    background: var(--primary);
-  }
 
   &:focus {
-    filter: brightness(94%);
   }
 
   &:hover {
-    filter: brightness(94%);
+    background: var(--p30);
+  }
+
+  &:active {
+    background: var(--p50)!important;
+    box-shadow: none;
   }
   &.active {
-    filter: brightness(74%);
+    background: var(--p30);
   }
 
+  &.secondary{
+    background: red;
+  }
+  &.primary{
+    background: var(--p70);
+    color: var(--p10);
+
+    &:hover {
+      background: var(--p90);
+    }
+  }
+
+
   &[disabled] {
     pointer-events: none;
+    opacity: .7;
+    color: var(--text);
   }
 }
 
@@ -42,6 +56,8 @@
     font-size: 14px;
     line-height: 14px;
     font-weight: normal;
+    background: var(--p80)!important;
+    color: var(--p10);
   }
 }
 
@@ -50,4 +66,25 @@
   padding: 0;
   background: transparent;
   cursor: pointer;
+}
+
+
+.spinner-border {
+  width: 12px;
+  height: 12px;
+  border: 2px solid  var(--p10);
+  border-bottom-color: var(--p30);
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }