.btn {
  font-weight: 400;
  font-family: 'Nunito Semibold';
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --bs-btn-border-radius: 1.5rem;
  --bs-btn-border-width: .125rem;
  --bs-btn-disabled-opacity: 1;
  --bs-btn-active-box-shadow: none;
  --bs-btn-font-size: .875rem;
  --bs-btn-focus-shadow-rgb: var(--gel-primary-light-rgb);
  height: auto;
}

.btn-sm {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-border-radius: 1.5rem;
}

.btn-link {
  --bs-btn-hover-color: var(--gel-primary-light);
}

.btn-primary {
  --bs-btn-bg: var(--gel-primary-default);
  --bs-btn-border-color: var(--gel-primary-default);

  --bs-btn-hover-bg: var(--gel-primary-light);
  --bs-btn-hover-border-color: var(--gel-primary-light);

  --bs-btn-active-bg: var(--gel-primary-dark);
  --bs-btn-active-border-color: var(--gel-primary-dark);

  --bs-btn-disabled-bg: var(--gel-primary-disabled);
  --bs-btn-disabled-border-color: var(--gel-primary-disabled);
}

.btn-secondary {
  --bs-btn-color: var(--gel-primary-default);
  --bs-btn-bg: var(--gel-surface-default);
  --bs-btn-border-color: var(--gel-primary-default);

  --bs-btn-hover-color: var(--gel-primary-default);
  --bs-btn-hover-bg: var(--gel-surface-selected);
  --bs-btn-hover-border-color: var(--gel-primary-default);

  --bs-btn-active-color: var(--gel-primary-default);
  --bs-btn-active-bg: var(--gel-on-primary-mid-emphasis);
  --bs-btn-active-border-color: var(--gel-primary-default);
  --bs-btn-active-shadow: none;

  --bs-btn-disabled-color: var(--gel-on-surface-disabled);
  --bs-btn-disabled-bg: var(--gel-surface-default);
  --bs-btn-disabled-border-color: var(--gel-on-surface-disabled);
}

.btn-control, .btn-action {
  --bs-btn-color: #000000;
  --bs-btn-bg: var(--gel-surface-default);
  --bs-btn-border-color: var(--gel-surface-pressed);
  --bs-btn-border-radius: .3125rem;
  --bs-btn-border-width: .0625rem;

  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: var(--gel-surface-hover);
  --bs-btn-hover-border-color: var(--gel-surface-pressed);

  --bs-btn-focus-color: #000000;
  --bs-btn-focus-bg: var(--gel-surface-hover);
  --bs-btn-focus-border-color: var(--gel-surface-pressed);

  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: var(--gel-surface-hover);
  --bs-btn-active-border-color: var(--gel-surface-pressed);
  --bs-btn-active-shadow: none;

  --bs-btn-disabled-color: var(--gel-on-surface-disabled);
  --bs-btn-disabled-bg: var(--gel-surface-default);
  --bs-btn-disabled-border-color: var(--gel-surface-pressed);
  border-radius: .3125rem;
}

.btn-info {
  --bs-btn-color: #ffffff;
}