//==============================================
// Module/buttons
//==============================================
// Overwriting bootstrap styles

.btn {
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  color: var(--white);
  letter-spacing: var(--btn-text-spacing);
  font-weight: var(--btn-font-w);
  text-transform: var(--btn-text-transform);
  cursor: pointer;
}

button,
[type="button"] {
  -webkit-appearance: none;
  border: none;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--btn-bg-color);
  border-color: var(--btn-border-color);
  &:hover {
    background-color: var(--btn-bg-color-hover);
    border-color: var(--btn-border-color-hover);
  }
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
  background-color: transparent;
  border-color: transparent!important;
  color: var(--brand-primary)!important;
  &:hover {
    background-color: var(--gray-200);
    border-color: transparent!important;
  }
}

.btn-outline-secondary {
  color: #333!important;
  border-color: var(--form-control-border-color);
  &:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--btn-color-hover)!important;
  }
}

.btn-outline-dark {
  color: var(--brand-primary)!important;
  border: 2px solid var(--btn-border-color);
  padding: var(--btn-padding);
  letter-spacing: var(--btn-text-spacing);
  font-weight: var(--btn-font-w);
  text-transform: var(--btn-text-transform);
  &:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--btn-color-hover)!important;
  }
}
