/* ==========[ DANGER/RED ]========== */
.btn-sj-danger {
  background-color: var(--sj-grapefruit) !important;
  color: var(--bs-light) !important;
}
.btn-sj-danger:hover {
  background-color: var(--sj-persian-plum) !important;
  border: 1px solid white !important;
  color: white !important;
}

/* ==========[ WARNING/YELLOW ]========== */
.btn-sj-warning {
  background-color: var(--sj-cantaloupe) !important;
  color: var(--bs-dark) !important;
}
.btn-sj-warning:hover {
  background-color: var(--sj-gold-drop) !important;
  border: 1px solid white !important;
  color: white !important;
}

/* ==========[ SUCCESS/GREEN ]========== */
.btn-sj-success {
  background-color: var(--sj-green-pea) !important;
  color: var(--bs-light) !important;
}
.btn-sj-success:hover {
  background-color: var(--sj-dark-cyan) !important;
  color: var(--bs-light) !important;
}

/* ==========[ INFO/TEAL ]========== */
.btn-sj-info {
  background-color: var(--sj-dark-cyan) !important;
  color: var(--bs-light) !important;
}
.btn-sj-info:hover {
  background-color: var(--sj-medium-persian-blue) !important;
  color: var(--bs-light) !important;
}

/* ==========[ PRIMARY/BLUE ]========== */
.btn-sj-primary {
  background-color: var(--sj-medium-persian-blue) !important;
  color: var(--bs-light) !important;
}
.btn-sj-primary:hover {
  background-color: var(--sj-dark-cerulean) !important;
  color: var(--bs-light) !important;
}

/* ==========[ SECONDARY/GRAY ]========== */
.btn-sj-secondary {
  background-color: var(--sj-thunder) !important;
  color: var(--bs-light) !important;
}
.btn-sj-secondary:hover {
  background-color: var(--sj-navy) !important;
  color: var(--bs-light) !important;
}