/* -- Badge component ------------------------------------------- */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5rem;
    /* a pill never breaks its label or gets squeezed in a flex row (as in
       shadcn/ui) - a wrapped badge doubles its line-height into a lozenge */
    white-space: nowrap;
    flex-shrink: 0;

    /* -- Sizes: font, vertical padding and the line-height (which gives the
       pill its height) scale together. Default (no attribute) == md. */
    &[data-size="xs"] {
      font-size: 0.5625rem;
      padding: 0 0.375rem;
      line-height: 1.125rem;
    }
    &[data-size="sm"] {
      font-size: 0.625rem;
      padding: 0.0625rem 0.5rem;
      line-height: 1.25rem;
    }
    &[data-size="md"] {
      font-size: 0.6875rem;
      padding: 0.125rem 0.625rem;
      line-height: 1.5rem;
    }
    &[data-size="lg"] {
      font-size: 0.8125rem;
      padding: 0.1875rem 0.75rem;
      line-height: 1.75rem;
    }
    &[data-size="xl"] {
      font-size: 0.9375rem;
      padding: 0.25rem 0.875rem;
      line-height: 2rem;
    }

    &[data-variant="outline"] {
      border: 1px solid var(--border);
      color: var(--muted-foreground);
    }

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

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

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