@allsorter/ui-components 0.0.367 → 0.0.369

package/src/lib/button/button.component.scss

@@ -0,0 +1,1235 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import "../styles/typography-classes.scss";
+@import "../styles/colors.scss";
+@import "../styles/border-radius.scss";
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node");
+
+
+// Override grey color for buttons to use grey-600
+$color-grey: $color-grey-600;
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  /* These two preserve the standard Material Icons sizing/ligatures */
+  font-feature-settings: 'liga';
+  font-variation-settings: 'FILL'0, 'wght'400, 'GRAD'0, 'opsz'24;
+  /* everything else can stay at Angular’s defaults */
+  /* Base Button Styling */
+}
+
+.mdc-button.btn {
+  /* Global radius as per spec */
+  border-radius: $radius-4;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  transition: background 0.2s, border 0.2s, transform 0.1s;
+
+  min-width: auto !important;
+  gap: 8px;
+  height: auto !important;
+}
+
+/* Button Categories primary*/
+.mdc-button.btn-primary1 {
+  background-color: $color-blue;
+  color: white;
+}
+
+.mdc-button.btn-primary2 {
+  background-color: $color-green;
+  color: white;
+}
+
+.mdc-button.btn-secondary {
+  background-color: $color-grey;
+  color: white;
+}
+
+.mdc-button.btn-destructive {
+  background-color: $color-error;
+  color: white;
+}
+
+.mdc-button.btn-gradient {
+  background: $color-gradient;
+  color: white;
+}
+
+/* Hover States */
+
+
+.mdc-button.btn-primary2:hover {
+  background-color: $color-green-hover !important;
+}
+
+.mdc-button.btn-primary2:active {
+  background-color: $color-green-active !important;
+}
+
+.mdc-button.btn-primary2:outlined {
+  background-color: #fff;
+  border-radius: $radius-4;
+  border: 1px solid $color-outline-green;
+}
+
+.mdc-button.btn-primary1:hover {
+  background-color: $color-blue-hover !important;
+}
+
+.mdc-button.btn-primary1:active {
+  background-color: $color-blue-active !important;
+}
+
+.mdc-button.btn-primary1:outlined {
+  background-color: #fff;
+  border-radius: $radius-4;
+  border: 1px solid $color-outline-blue;
+}
+
+.mdc-button.btn-secondary:hover {
+  background-color: $color-grey-hover !important;
+}
+
+.mdc-button.btn-secondary:active {
+  background-color: $color-grey-active !important;
+}
+
+.mdc-button.btn-secondary:outlined {
+  background-color: #fff;
+  border-radius: $radius-4;
+  border: 1px solid $color-outline-grey;
+}
+
+
+.mdc-button.btn-destructive:hover {
+  background-color: $color-error-hover !important;
+}
+
+.mdc-button.btn-destructive:active {
+  background-color: $color-error-active !important;
+}
+
+.mdc-button.btn-destructive:outlined {
+  background-color: #fff;
+  border-radius: $radius-4;
+  border: 1px solid $color-outline-error;
+}
+
+.mdc-button.btn-gradient:hover {
+  background: $color-gradient-hover !important;
+}
+
+.mdc-button.btn-gradient:active {
+  background: $color-gradient-active !important;
+}
+
+
+
+
+/* Pressed States (pseudo-class for active) */
+
+
+/* Disabled State */
+.mdc-button.btn-disabled {
+  border: none !important;
+  opacity: 0.4; // visually dim the existing button color
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Color styles - Filled (default) */
+.blue {
+  background-color: $color-blue !important;
+  color: #fff;
+}
+
+.blue.btn-hover,
+.blue:hover {
+  background-color: $color-blue-hover !important;
+}
+
+.blue.btn-pressed,
+.blue:active {
+  background-color: $color-blue-active !important;
+}
+
+.green {
+  background-color: $color-green !important;
+  color: #fff;
+}
+
+.green.btn-hover,
+.green:hover {
+  background-color: $color-green-hover !important;
+}
+
+.green.btn-pressed,
+.green:active {
+  background-color: $color-green-active !important;
+}
+
+.grey {
+  background-color: $color-grey !important;
+  color: #fff;
+}
+
+.grey.btn-hover,
+.grey:hover {
+  background-color: $color-grey-hover !important;
+}
+
+.grey.btn-pressed,
+.grey:active {
+  background-color: $color-grey-active !important;
+}
+
+.error {
+  background-color: $color-error !important;
+  color: #fff !important;
+}
+
+.error.btn-hover,
+.error:hover {
+  background-color: $color-error-hover !important;
+  color: #fff !important;
+}
+
+.error.btn-pressed,
+.error:active {
+  background-color: $color-error-active !important;
+  color: #fff !important;
+}
+
+.success {
+  background-color: $color-success !important;
+  color: #fff !important;
+}
+
+.success.btn-hover,
+.success:hover {
+  background-color: $color-success-hover !important;
+  color: #fff !important;
+}
+
+.success.btn-pressed,
+.success:active {
+  background-color: $color-success-active !important;
+  color: #fff !important;
+}
+
+.gradient {
+  background: linear-gradient(275deg, $color-blue -36.22%, $color-green 100.04%);
+  color: #fff !important;
+}
+
+.gradient.btn-hover,
+.gradient:hover {
+  opacity: 0.9;
+}
+
+.gradient.btn-pressed,
+.gradient:active {
+  opacity: 0.8;
+}
+
+.white {
+  background-color: #fff !important;
+  color: $color-grey-800 !important;
+}
+
+.white.btn-hover,
+.white:hover {
+  background-color: $color-grey-100 !important;
+}
+
+.white.btn-pressed,
+.white:active {
+  background-color: $color-grey-200 !important;
+}
+
+/* Outline styles - Applied when btn-outlined class is present */
+.blue.btn-outlined {
+  background-color: #fff !important;
+  color: $color-outline-blue !important;
+  box-shadow: inset 0 0 0 1px $color-outline-blue !important;
+}
+
+.blue.btn-outlined.btn-hover,
+.blue.btn-outlined:hover {
+  background-color: $color-blue-hover !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.blue.btn-outlined.btn-pressed,
+.blue.btn-outlined:active {
+  background-color: $color-blue-active !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.green.btn-outlined {
+  background-color: #fff !important;
+  color: $color-outline-green !important;
+  box-shadow: inset 0 0 0 1px $color-outline-green !important;
+}
+
+.green.btn-outlined.btn-hover,
+.green.btn-outlined:hover {
+  background-color: $color-green-hover !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.green.btn-outlined.btn-pressed,
+.green.btn-outlined:active {
+  background-color: $color-green-active !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.grey.btn-outlined {
+  background-color: #fff !important;
+  color: $color-outline-grey !important;
+  box-shadow: inset 0 0 0 1px $color-outline-grey !important;
+}
+
+.grey.btn-outlined.btn-hover,
+.grey.btn-outlined:hover {
+  background-color: $color-grey-hover !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.grey.btn-outlined.btn-pressed,
+.grey.btn-outlined:active {
+  background-color: $color-grey-active !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.error.btn-outlined {
+  background-color: #fff !important;
+  color: $color-outline-error !important;
+  box-shadow: inset 0 0 0 1px $color-outline-error !important;
+}
+
+.error.btn-outlined.btn-hover,
+.error.btn-outlined:hover {
+  background-color: $color-error-hover !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.error.btn-outlined.btn-pressed,
+.error.btn-outlined:active {
+  background-color: $color-error-active !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.error.btn-outlined mat-icon,
+.error.btn-outlined .button-label {
+  color: $color-outline-error !important;
+}
+
+.error.btn-outlined:hover mat-icon,
+.error.btn-outlined:hover .button-label,
+.error.btn-outlined:active mat-icon,
+.error.btn-outlined:active .button-label {
+  color: #fff !important;
+}
+
+.success.btn-outlined {
+  background-color: #fff !important;
+  color: $color-outline-success !important;
+  box-shadow: inset 0 0 0 1px $color-outline-success !important;
+}
+
+.success.btn-outlined.btn-hover,
+.success.btn-outlined:hover {
+  background-color: $color-success-hover !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.success.btn-outlined.btn-pressed,
+.success.btn-outlined:active {
+  background-color: $color-success-active !important;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent !important;
+}
+
+.success.btn-outlined mat-icon,
+.success.btn-outlined .button-label {
+  color: $color-outline-success !important;
+}
+
+.success.btn-outlined:hover mat-icon,
+.success.btn-outlined:hover .button-label,
+.success.btn-outlined:active mat-icon,
+.success.btn-outlined:active .button-label {
+  color: #fff !important;
+}
+
+.white.btn-outlined {
+  background-color: transparent !important;
+  color: $color-outline-white !important;
+  box-shadow: inset 0 0 0 1px $color-outline-white !important;
+}
+
+.white.btn-outlined.btn-hover,
+.white.btn-outlined:hover {
+  background-color: transparent !important;
+  color: $color-outline-white !important;
+}
+
+.white.btn-outlined.btn-pressed,
+.white.btn-outlined:active {
+  background-color: transparent !important;
+  color: $color-outline-white !important;
+}
+
+
+/* Spacing between icon and label */
+.btn.custom-button>*+* {
+  margin-left: 8px;
+}
+
+/* Fixed 20x20 icon size for label/two-icon buttons */
+.two-icon-label {
+  padding: 4px 12px !important;
+}
+
+button.two-icon-label .mat-icon {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+
+/* etc. */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.left-icon {
+  order: 0;
+}
+
+.right-icon {
+  order: 2;
+}
+
+mat-icon.mat-icon {
+  margin: 0 !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  vertical-align: middle;
+}
+
+.left-icon,
+.right-icon {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-shrink: 0;
+}
+
+/* Ensure SVG icons inherit button text color for proper visibility */
+.left-icon ::ng-deep svg,
+.right-icon ::ng-deep svg {
+  fill: currentColor !important;
+}
+
+/* For white buttons with outlined style, ensure icons are visible */
+.white.btn-outlined .left-icon ::ng-deep svg,
+.white.btn-outlined .right-icon ::ng-deep svg {
+  fill: currentColor !important;
+}
+
+/* ------------------------------------------------------------------
+   Size utility classes
+------------------------------------------------------------------ */
+
+
+
+/* New naming convention */
+.size-header {
+  font-size: 20px;
+  padding: 4px 12px !important;
+}
+
+.size-xs {
+  font-size: 12px;
+  padding: 8px 12px !important;
+}
+
+.size-sm {
+  font-size: 14px;
+  padding: 8px 12px !important;
+}
+
+.size-base {
+  font-size: 14px;
+  padding: 10px 16px !important;
+}
+
+.size-l {
+  font-size: 16px;
+  padding: 12px 20px !important;
+}
+
+.size-xl {
+  font-size: 16px;
+  padding: 14px 24px !important;
+}
+
+/* Reuse .size-xl for xl */
+
+/* Icon sizes for new naming */
+.size-header .mat-icon {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.size-header .mat-icon ::ng-deep svg {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.size-xs .mat-icon {
+  font-size: 16px;
+  height: 16px;
+  width: 16px;
+}
+
+.size-sm .mat-icon,
+.size-base .mat-icon {
+  font-size: 16px;
+  height: 16px;
+  width: 16px;
+}
+
+.size-l .mat-icon {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+}
+
+.size-xl .mat-icon {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+}
+
+/* Adjust gap for header size */
+.btn.size-header {
+  gap: 4px !important;
+  padding: 4px 12px !important;
+}
+
+/* --------------------------------------------------
+   Dropdown menu custom styling
+-------------------------------------------------- */
+::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,
+::ng-deep .custom-dropdown-menu.mat-menu-panel {
+  padding: 0;
+  /* remove default padding */
+  border-radius: $radius-8;
+  /* rounded corners */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,
+::ng-deep .custom-dropdown-menu .mat-menu-content {
+  padding: 0;
+}
+
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,
+::ng-deep .custom-dropdown-menu .mat-menu-item {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  /* 22.4px */
+  letter-spacing: 0.04px;
+  height: 56px;
+  padding: 16px 24px;
+  color: var(--Gray-700, #414651);
+  transition: background 0.2s ease-in-out;
+}
+
+/* Hover state */
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,
+::ng-deep .custom-dropdown-menu .mat-menu-item:hover {
+  background: #F7F9FE !important;
+}
+
+/* Focus state */
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,
+::ng-deep .custom-dropdown-menu .mat-menu-item:focus,
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,
+::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused {
+  background: #E5E9FC !important;
+  outline: none;
+}
+
+/* Active/pressed state */
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,
+::ng-deep .custom-dropdown-menu .mat-menu-item:active {
+  background: #F7F9FE !important;
+}
+
+/* Selected state */
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected="true"],
+::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected="true"],
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,
+::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted {
+  background: #F7F9FE !important;
+  color: #5473E8 !important;
+}
+
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected="true"] .mat-mdc-menu-item-text,
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected="true"] span,
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span {
+  color: #5473E8 !important;
+}
+
+/* subtle divider between items */
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,
+::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item {
+  border-top: 1px solid #EAECEE;
+}
+
+/* Force white background on Angular Material menu panel */
+::ng-deep .mat-mdc-menu-panel,
+::ng-deep .mat-menu-panel,
+::ng-deep .mdc-menu-surface {
+  background-color: #ffffff !important;
+  --mdc-theme-surface: #ffffff !important;
+  --mdc-menu-container-color: #ffffff !important;
+}
+
+::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,
+::ng-deep .mat-menu-panel .mat-menu-content {
+  background-color: #ffffff !important;
+}
+
+/* Typography styling for mat-mdc-menu-item */
+::ng-deep .mat-mdc-menu-item,
+::ng-deep .custom-dropdown-menu .mat-mdc-menu-item {
+  color: var(--Gray-700, #414651) !important;
+  font-family: Roboto, sans-serif !important;
+  font-size: 16px !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 140% !important;
+  /* 22.4px */
+  letter-spacing: 0.04px !important;
+  --mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;
+  --mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important;
+}
+
+::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,
+::ng-deep .mat-mdc-menu-item span {
+  color: var(--Gray-700, #414651) !important;
+  font-family: Roboto, sans-serif !important;
+  font-size: 16px !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 140% !important;
+  /* 22.4px */
+  letter-spacing: 0.04px !important;
+}
+
+/* Ensure dropdown menu is above other elements */
+.cdk-overlay-pane {
+  z-index: 1000 !important;
+  background: #fff !important;
+}
+
+::ng-deep .mat-mdc-menu-panel,
+::ng-deep .mat-menu-panel,
+::ng-deep .mdc-menu-surface,
+.cdk-overlay-pane .mat-mdc-menu-panel,
+.cdk-overlay-pane .mdc-menu-surface,
+.cdk-overlay-pane .mat-menu-panel {
+  background-color: #ffffff !important;
+  --mdc-theme-surface: #ffffff !important;
+  --mdc-menu-container-color: #fff !important;
+}
+
+/* Make sure the Material menu panel itself is white (use ::ng-deep so rules pierce view encapsulation) */
+
+
+.mat-mdc-menu-panel,
+.mdc-menu-surface,
+.mat-menu-panel {
+  --mdc-theme-surface: #ffffff !important;
+  /* Material variable */
+  background-color: #ffffff !important;
+}
+
+.cdk-overlay-pane .mat-mdc-menu-panel,
+.cdk-overlay-pane .mdc-menu-surface,
+.cdk-overlay-pane .mat-mdc-menu-panel {
+  --mdc-menu-container-color: #fff !important;
+}
+
+.cdk-overlay-pane .mat-menu-panel,
+.cdk-overlay-pane .mat-mdc-menu-content,
+.cdk-overlay-pane .mat-menu-content {
+  background: #fff !important;
+}
+
+
+/* Icon size helper */
+
+
+/* --------------------------------------------------
+   Button types
+-------------------------------------------------- */
+button.icon-circle {
+  width: auto !important;
+  height: auto !important;
+  border-radius: 50% !important;
+  aspect-ratio: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  line-height: 0 !important; // Remove extra vertical space inside circular button
+  padding: 0 !important;
+  min-width: 0 !important;
+  justify-content: center;
+  padding: 6px !important;
+}
+
+.size-small.icon-circle {
+  padding: 4px !important;
+}
+
+.size-medium.icon-circle {
+  padding: 8px !important;
+}
+
+.size-base.icon-circle {
+  padding: 10px !important;
+}
+
+.size-large.icon-circle {
+  padding: 12px !important;
+}
+
+.size-xl.icon-circle {
+  padding: 14px !important;
+}
+
+/* Circle button size overrides */
+.size-header.icon-circle {
+  padding: 4px !important;
+}
+
+.size-header.icon-circle .mat-icon {
+  width: 10px;
+  height: 10px;
+  font-size: 10px;
+}
+
+.size-xs.icon-circle {
+  padding: 4px !important;
+}
+
+.size-xs.icon-circle .mat-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ::ng-deep svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.size-sm.icon-circle {
+  padding: 10px !important;
+  height: 32px !important;
+  width: 32px !important;
+}
+
+.size-sm.icon-circle .mat-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ::ng-deep svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.size-base.icon-circle {
+  padding: 10px !important;
+}
+
+.size-base.icon-circle .mat-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ::ng-deep svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.size-l.icon-circle {
+  padding: 12px !important;
+}
+
+.size-l.icon-circle .mat-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ::ng-deep svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.size-xl.icon-circle {
+  padding: 14px !important;
+}
+
+.size-xl.icon-circle .mat-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+/* icon-label and two-icon-label just rely on default flex behaviour */
+.icon-xs {
+  /* width: 16px; height: 16px;  */
+  padding: 4px !important;
+}
+
+
+/* ------------------------------------------------------------------
+   Color category classes (solid)
+------------------------------------------------------------------ */
+.mdc-button.blue {
+  background-color: $color-blue;
+  color: #fff;
+}
+
+.mdc-button.blue:hover {
+  background-color: $color-blue-hover;
+}
+
+.mdc-button.blue:active {
+  background-color: $color-blue-active;
+}
+
+.mdc-button.green {
+  background-color: $color-green;
+  color: #fff;
+}
+
+.mdc-button.green:hover {
+  background-color: $color-green-hover;
+}
+
+.mdc-button.green:active {
+  background-color: $color-green-active;
+}
+
+.mdc-button.grey {
+  background-color: $color-grey;
+  color: #fff;
+}
+
+.mdc-button.grey:hover {
+  background-color: $color-grey-hover;
+}
+
+.mdc-button.grey:active {
+  background-color: $color-grey-active;
+}
+
+.mdc-button.error {
+  background-color: $color-error;
+  color: #fff !important;
+}
+
+.mdc-button.error:hover {
+  background-color: $color-error-hover;
+  color: #fff !important;
+}
+
+.mdc-button.error:active {
+  background-color: $color-error-active;
+  color: #fff !important;
+}
+
+.mdc-button.success {
+  background-color: $color-success;
+  color: #fff !important;
+}
+
+.mdc-button.success:hover {
+  background-color: $color-success-hover;
+  color: #fff !important;
+}
+
+.mdc-button.success:active {
+  background-color: $color-success-active;
+  color: #fff !important;
+}
+
+.mdc-button.gradient {
+  background: $color-gradient;
+  color: #fff;
+}
+
+.mdc-button.gradient:hover {
+  background: $color-gradient-hover;
+}
+
+.mdc-button.gradient:active {
+  background: $color-gradient-active;
+}
+
+.mdc-button.disabled,
+.mdc-button:disabled {
+  opacity: 0.4; // fade existing color
+  cursor: not-allowed !important;
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------------
+   Outline variants
+   Legacy: *-no-outline (kept for back-compat)
+   New:    *-colour-outline (height-safe via inset shadow)
+------------------------------------------------------------------- */
+/* Legacy border-based outline (kept) */
+.mdc-button.blue-no-outline {
+  background-color: #fff;
+  color: $color-outline-blue;
+  border: 1px solid $color-outline-blue;
+}
+
+.mdc-button.blue-no-outline:hover {
+  background-color: $color-blue-hover;
+  color: #fff;
+}
+
+.mdc-button.blue-no-outline:active {
+  background-color: $color-blue-active;
+  color: #fff;
+}
+
+.mdc-button.white-colour-outline {
+  background-color: transparent;
+  color: $color-outline-white;
+  border: 1px solid $color-outline-white;
+}
+
+.mdc-button.white-colour-outline:hover {
+  background-color: transparent;
+  color: $color-outline-white;
+}
+
+.mdc-button.white-colour-outline:active {
+  background-color: transparent;
+  color: $color-outline-white;
+}
+
+
+.mdc-button.green-no-outline {
+  background-color: #fff;
+  color: $color-outline-green;
+  border: 1px solid $color-outline-green;
+}
+
+.mdc-button.green-no-outline:hover {
+  background-color: $color-green-hover;
+  color: #fff;
+}
+
+.mdc-button.green-no-outline:active {
+  background-color: $color-green-active;
+  color: #fff;
+}
+
+.mdc-button.grey-no-outline {
+  background-color: #fff;
+  color: $color-outline-grey;
+  border: 1px solid $color-outline-grey;
+}
+
+.mdc-button.grey-no-outline:hover {
+  background-color: $color-grey-hover;
+  color: #fff;
+}
+
+.mdc-button.grey-no-outline:active {
+  background-color: $color-grey-active;
+  color: #fff;
+}
+
+.mdc-button.error-no-outline {
+  background-color: #fff;
+  color: $color-outline-error;
+  border: 1px solid $color-outline-error;
+}
+
+.mdc-button.error-no-outline:hover {
+  background-color: $color-error-hover;
+  color: #fff;
+}
+
+.mdc-button.error-no-outline:active {
+  background-color: $color-error-active;
+  color: #fff;
+}
+
+/* New height-safe outline using inset shadow (no size change) */
+.mdc-button.blue-colour-outline {
+  background-color: #fff;
+  color: $color-outline-blue;
+  box-shadow: inset 0 0 0 1px $color-outline-blue;
+}
+
+.mdc-button.blue-colour-outline:hover {
+  background-color: $color-blue-hover;
+  color: #fff;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.blue-colour-outline:active {
+  background-color: $color-blue-active;
+  color: #fff;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.green-colour-outline {
+  background-color: #fff;
+  color: $color-outline-green;
+  box-shadow: inset 0 0 0 1px $color-outline-green;
+}
+
+.mdc-button.green-colour-outline:hover {
+  background-color: $color-green-hover;
+  color: #fff;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.green-colour-outline:active {
+  background-color: $color-green-active;
+  color: #fff;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.grey-colour-outline {
+  background-color: #fff;
+  color: $color-outline-grey;
+  box-shadow: inset 0 0 0 1px $color-outline-grey;
+}
+
+.mdc-button.grey-colour-outline:hover {
+  background-color: $color-grey-hover;
+  color: #fff;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.grey-colour-outline:active {
+  background-color: $color-grey-active;
+  color: #fff;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.error-colour-outline {
+  background-color: #fff;
+  color: $color-outline-error !important;
+  box-shadow: inset 0 0 0 1px $color-outline-error;
+}
+
+.mdc-button.error-colour-outline:hover {
+  background-color: $color-error-hover;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.error-colour-outline:active {
+  background-color: $color-error-active;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.error-colour-outline mat-icon,
+.mdc-button.error-colour-outline .button-label {
+  color: $color-outline-error !important;
+}
+
+.mdc-button.error-colour-outline:hover mat-icon,
+.mdc-button.error-colour-outline:hover .button-label,
+.mdc-button.error-colour-outline:active mat-icon,
+.mdc-button.error-colour-outline:active .button-label {
+  color: #fff !important;
+}
+
+.mdc-button.success-colour-outline {
+  background-color: #fff;
+  color: $color-outline-success !important;
+  box-shadow: inset 0 0 0 1px $color-outline-success;
+}
+
+.mdc-button.success-colour-outline:hover {
+  background-color: $color-success-hover;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.success-colour-outline:active {
+  background-color: $color-success-active;
+  color: #fff !important;
+  box-shadow: inset 0 0 0 0px transparent;
+}
+
+.mdc-button.success-colour-outline mat-icon,
+.mdc-button.success-colour-outline .button-label {
+  color: $color-outline-success !important;
+}
+
+.mdc-button.success-colour-outline:hover mat-icon,
+.mdc-button.success-colour-outline:hover .button-label,
+.mdc-button.success-colour-outline:active mat-icon,
+.mdc-button.success-colour-outline:active .button-label {
+  color: #fff !important;
+}
+
+/*************Button Drop down design*********/
+::ng-deep .cdk-overlay-pane {
+  border-radius: 8px !important;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15) !important;
+}
+
+::ng-deep .mat-mdc-menu-panel {
+  padding: 4px 0 !important;
+  background-color: white !important;
+  min-width: 180px !important;
+  border-radius: 8px !important;
+  box-shadow: none !important;
+  /* handled by cdk-overlay-pane */
+}
+
+::ng-deep .mat-mdc-menu-item {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  /* 22.4px */
+  letter-spacing: 0.04px;
+  color: var(--Gray-700, #414651);
+  padding: 12px 16px;
+  border-radius: 0 !important;
+  transition: background 0.2s ease-in-out;
+}
+
+/* Hover state */
+::ng-deep .mat-mdc-menu-item:hover {
+  background-color: #F7F9FE !important;
+}
+
+/* Focus state */
+::ng-deep .mat-mdc-menu-item:focus,
+::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused {
+  background-color: #E5E9FC !important;
+  outline: none;
+}
+
+/* Selected state */
+::ng-deep .mat-mdc-menu-item[aria-selected="true"],
+::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted {
+  background-color: #F7F9FE !important;
+  color: #5473E8 !important;
+}
+
+::ng-deep .mat-mdc-menu-item[aria-selected="true"] .mat-mdc-menu-item-text,
+::ng-deep .mat-mdc-menu-item[aria-selected="true"] span,
+::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,
+::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span {
+  color: #5473E8 !important;
+}
+
+/* For header size, hide only the text label, keep icons visible */
+.size-header .button-label {
+  display: none !important;
+}
+
+/* Ensure icons are visible and properly displayed for header size */
+.size-header .mat-icon,
+.size-header .left-icon,
+.size-header .right-icon {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Ensure the Material Design button label container displays properly for header size */
+.size-header ::ng-deep .mdc-button__label {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px;
+}
+
+::ng-deep .mat-mdc-button-touch-target {
+  display: none !important;
+}