/* Styling for buttons */

.btn {
  --bs-btn-padding-x: 0.8em;
  --bs-btn-padding-y: 0.4em;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
  font-weight: 500;
}

.btn .material-symbols-outlined {
  height: 0;
  line-height: 0;
}

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

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--brand-color5);
  --bs-btn-border-color: var(--brand-color5);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-color5);
  --bs-btn-hover-border-color: var(--brand-color5);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-color5);
  --bs-btn-active-border-color: var(--brand-color5);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--brand-color5);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--brand-color5);
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: underline;
}