.btn {
  display: inline-flex;
  padding: var(--8, 0.5rem) var(--12, 0.75rem);
  justify-content: center;
  align-items: center;
  gap: var(--4, 0.25rem);

  color: var(--text-interactive-neutral-resting, #4F4E4C);
  border-radius: var(--full, 62.5rem);
  background: #FFFFFF;
  border-color: #FFFFFF;
  border-width: 0;
  text-decoration: none;

  cursor: pointer;
  transition: background-color 250ms;

  /* 14/regular */
  font-family: "DM Sans"; 
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
}
.btn:hover {
  color: var(--text-interactive-neutral-hovered);
  background: var(--base-neutral-hovered, #F2F1EC);
}
.btn:active {
  color: var(--text-interactive-neutral-pressed);
  background: var(--base-neutral-pressed, #E7E5DF);
}
.btn:disabled {
  color: var(--text-status-disabled);
}

.btn-primary {
  display: inline-flex;
  padding: var(--8, 0.5rem) var(--12, 0.75rem);
  justify-content: center;
  align-items: center;
  gap: var(--4, 0.25rem);

  color: var(--text-contrast-inverse);
  background: var(--text-interactive-prominent-resting, #006CCF);
}
.btn-primary:hover {
  color: var(--text-contrast-inverse);
  background: var(--text-interactive-prominent-hovered, #024D95);
}
.btn-primary:active {
  color: var(--text-contrast-inverse);
  background: var(--text-interactive-prominent-pressed, #15325D);
}
.btn-primary:disabled {
  color: var(--text-status-disabled);
  background: var(--background-status-disabled, #E7E5DF);
}

.btn-outline {
  border: 1px solid var(--graphic-interactive-neutral-resting, #8A8985);

  color: var(--text-interactive-neutral-resting, #4F4E4C);

  /* 14/semibold */
  font-family: "DM Sans";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
}
.btn-outline:hover {
  border: 1px solid var(--graphic-interactive-neutral-hovered, #6E6D6A);
  background: var(--base-neutral-hovered, #F2F1EC);
}
.btn-outline:active {
  border: 1px solid var(--graphic-interactive-neutral-pressed, #4F4E4C);
  background: var(--base-neutral-pressed, #E7E5DF);
}
.btn-outline:disabled {
  color: var(--text-status-disabled);
  border: 1px solid var(--graphic-status-disabled, #C0BEB9);
}

.btn-danger {
  color: var(--text-interactive-negative-resting, #C04226);
}
.btn-danger:hover {
  color: var(--text-interactive-negative-hovered);
  background: var(--background-interactive-negative-hovered, #FFEDE6);
}
.btn-danger:active {
  color: var(--text-interactive-negative-pressed);
  background: var(--background-interactive-negative-pressed, #FFDED2);
}
.btn-danger:disabled {
  color: var(--text-status-disabled);
}

.btn-outline-primary {
  color: var(--text-interactive-prominent-resting);
  border: 1px solid var(--graphic-interactive-prominent-resting, #006CCF);
}
.btn-outline-primary:hover {
  color: var(--text-interactive-prominent-hovered);
  border: 1px solid var(--graphic-interactive-prominent-hovered, #024D95);
  background: var(--background-interactive-prominent-hovered, #EAF5FF);
}
.btn-outline-primary:active {
  color: var(--text-interactive-prominent-pressed);
  border: 1px solid var(--graphic-interactive-prominent-pressed, #15325D);
  background: var(--background-interactive-prominent-pressed, #D9EDFF);
}
.btn-outline-primary:disabled {
  color: var(--text-status-disabled);
  border: 1px solid var(--graphic-status-disabled, #C0BEB9);
}