@layer components {
  .badge {
    --bg-amount: 10%;

    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-8);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-full);

    [data-theme="dark"] & {
      --bg-amount: 30%;
    }

    &.secondary {
      background-color: var(--secondary);
      color: var(--secondary-foreground);
    }

    &.outline {
      background-color: transparent;
      color: var(--foreground);
      border: 1px solid var(--border);
    }

    &.success {
      color: var(--success);
      background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);
    }

    &.warning {
      color: var(--warning);
      background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent);
    }

    &.danger {
      color: var(--danger);
      background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent);
    }
  }
}