.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-xs--line-height);
  gap: calc(var(--spacing) * 1);

  /* Variant */
  &[data-variant="primary"] {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  &[data-variant="secondary"] {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
  }

  &[data-variant="destructive"] {
    background-color: var(--color-destructive);
    color: var(--color-white);
  }

  &[data-variant="outline"] {
    border-color: var(--color-input);
    background-color: var(--color-background);
  }
}

:global(.dark) {
  .badge {
    &[data-variant="destructive"] {
      background-color: color-mix(
        in oklab,
        var(--color-destructive) 60%,
        transparent
      );
    }
  }
}
