1 files changed, 111 insertions, 19 deletions

diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b8169..86853f41 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -10,7 +10,7 @@
     margin-right: $spacer / 4;
   }
   &:disabled {
-    color: gray("600");
+    color: $red;
     fill: currentColor;
     box-shadow: none !important;
     &:not(.btn-link) {
@@ -21,27 +21,114 @@
 }
 
 .btn-primary {
-  fill: currentColor;
-  &:focus,
-  &:not(:disabled):not(.disabled):active:focus {
-    border-color: $white;
-    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+  background-color: $red;
+  border-radius: $border-radius;
+  border: none;
+  box-shadow: 1px 2px 2px -1px #4f252566 inset;
+  &:hover {
+    background-color: $red-hover;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    background-color: $red-click;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px $red-shadow;
+    background-color: $red;
+  }
+  &:active {
+    border: none;
+    box-shadow: none;
+    background-color: $red;
   }
 }
 
 .btn-secondary {
-  fill: currentColor;
-  &:focus,
-  &:not(:disabled):not(.disabled):active:focus {
-    border-color: $white;
-    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+  background-color: $gray-5;
+  color: $red;
+  border-radius: $border-radius;
+  border: none;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  &:hover {
+    background-color: $gray-5-hover;
+    color: $red;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px $red-shadow;
+    color: $red;
+    background-color: $gray-5;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    color: $red;
+    background-color: $gray-20;
+  }
+}
+
+.btn-unstiled {
+  border: none;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.btn-popover {
+  border: none;
+  color: $red;
+  height: 28px;
+  border-radius: $border-radius;
+  font-weight: 500;
+  font-size: 12px;
+  transition: ease-in 0.2s;
+  &:hover {
+    color: $white;
+    transition: ease-in 0.2s;
+  }
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+  &.selected-unit-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+  &.selected-choice-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+}
+
+.btn-toogle-popover {
+  justify-content: flex-start;
+  width: 25px;
+  height: 16px;
+  padding: 0;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
   }
 }
 
 // Global style for all button link
 .btn-link {
-  font-weight: $headings-font-weight;
-  fill: theme-color("primary");
+  color: $text-primary;
   text-decoration: none !important;
   &:hover {
     background-color: gray("200");
@@ -50,14 +137,19 @@
   &:active {
     background-color: gray("300");
   }
-  &:focus {
-    box-shadow: inset 0 0 0 2px theme-color("primary");
-    color: theme-color("primary");
-    outline: none;
-  }
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
   }
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+    .icon-expand-right {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+  }
 }
 
 // Icon only buttons
@@ -77,6 +169,6 @@
 // Contain input buttons within input
 .btn-datepicker .dropdown-toggle,
 .input-action-btn {
-  padding: 7px;
+  padding: 6px;
   margin: 1px;
 }
\ No newline at end of file