.btn-primary {
  color: #fff;
  background: var(--da-brand-base);
  border-color: var(--da-brand-base);
}
.btn-primary:hover {
  color: #fff;
  background: var(--da-brand-hover);
  border-color: var(--da-brand-hover);
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background: var(--da-brand-hover);
  border-color: var(--da-brand-hover);
}
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: var(--da-brand-base);
  border-color: var(--da-brand-base);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--da-brand-active);
  border-color: var(--da-brand-active);
}

.btn-secondary {
  color: var(--da-brand-base);
  background: transparent;
  border-color: var(--da-brand-base);
}
.btn-secondary:hover {
  color: var(--da-brand-base);
  background: var(--da-brand-20);
  border-color: var(--da-brand-base);
}
.btn-secondary:focus,
.btn-secondary.focus {
  color: var(--da-brand-base);
  background: var(--da-brand-20);
  border-color: var(--da-brand-base);
}
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: var(--da-brand-base);
  background-color: transparent;
  border-color: var(--da-brand-base);
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: transparent;
  border-color: var(--da-brand-base);
}

.btn {
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}