/* A link that looks like a button, with an optional count badge. */
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 6rem;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius);
    white-space: nowrap;

    &:hover {
      background-color: var(--color-primary-hover);
      color: var(--color-on-primary);
    }
  }

  .button__count {
    padding: 0.2em 0.5em;
    font-size: var(--font-size-sm);
    font-weight: bold;
    line-height: 1;
    color: var(--color-text);
    background-color: var(--color-surface-subtle);
    border-radius: var(--radius);
  }
}