.btn {
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-canvas);
  color: var(--color-ink-muted);
  text-decoration: none;
  font: inherit;
  font-size: var(--font-size-s);

  &:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-ink);
  }
}

.btn--primary {
  border-color: var(--color-ink);
  color: var(--color-ink);
  font-weight: 700;

  &:hover {
    background-color: var(--color-ink);
    color: var(--color-canvas);
  }
}

.btn--text {
  border-color: transparent;
  padding-inline: 0;

  &:hover {
    background-color: transparent;
    color: var(--color-ink);
  }
}