.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-green);
  color: var(--color-neutral-0);
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--border-radius);

  &:hover {
    background-color: var(--color-green-light);
    color: var(--color-green-dark);
    text-decoration: none;
  }

  &.btn-danger {
    background: var(--color-red);

    &:hover {
      background-color: var(--color-red-light);
      color: var(--color-red-dark);
    }
  }

  &.btn-secondary {
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-500);

    &:hover {
      background-color: var(--color-neutral-150);
      color: var(--color-neutral-400);
    }
  }
}

.btn-group {
  display: inline-flex;
  gap: 10px;
  justify-content: center;
}