src/assets/styles/bmc/custom/_buttons.scss

@import 'bootstrap/dist/css/bootstrap.css';

.btn {
  padding-top: calc($spacer / 2);
  padding-inline-end: $spacer;
  padding-bottom: calc($spacer / 2);
  padding-inline-start: $spacer;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  svg {
    margin-inline-end: calc($spacer / 4);
  }
  &:disabled {
    color: $gray-600;
    fill: currentColor;
    box-shadow: none !important;
    &:not(.btn-link) {
      border-color: $gray-400;
      background-color: $gray-400;
    }
  }
}

.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;
  }
}

.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;
  }
}

// Global style for all button link
.btn-link {
  font-weight: $headings-font-weight;
  fill: theme-color("primary");
  text-decoration: none !important;
  &:hover {
    background-color: $gray-200;
    color: theme-color("primary");
  }
  &: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;
  }
}

// Icon only buttons
.btn-icon-only svg {
  margin-inline-end: 0;
}

// Datepicker, clear search and Password toggle buttons
.input-action-btn,
.btn-datepicker {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  z-index: $zindex-dropdown + 1;
}

// Contain input buttons within input
.btn-datepicker .dropdown-toggle,
.input-action-btn {
  padding: 7px;
  margin: 1px;
}