.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-light);
  --bs-btn-hover-border-color: var(--primary-light);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-bg: var(--secondary);
  --bs-btn-disabled-border-color: var(--secondary);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-light);
  --bs-btn-hover-border-color: var(--primary-light);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--secondary-light);
  --bs-btn-hover-border-color: var(--secondary-light);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secondary);
  --bs-btn-active-border-color: var(--secondary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-border-color: var(--secondary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secondary);
  --bs-btn-active-border-color: var(--secondary);
}

.btn-icon {
  display: flex;
  align-items: center;
  gap: .75rem;

  span {
    @media (max-width: 767px) {
      display: none;
    }
  }
}