/*
 * Badge Components
 * Status badges, tags, pills
 */

@layer components {
  /* Base badge */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: var(--block-space-quarter) var(--block-space-3quarter);
    font-size: var(--text-small);
    line-height: var(--leading-tight);
    border-radius: var(--radius-full);
  }

  /* Default/Neutral badge */
  .badge--default {
    background-color: var(--color-gray-lighter);
    color: var(--color-gray-darker);
  }

  /* Success badge */
  .badge--success {
    background-color: var(--color-positive-light);
    color: var(--color-positive-dark);
  }

  /* Danger badge */
  .badge--danger {
    background-color: var(--color-negative-light);
    color: var(--color-negative-dark);
  }

  /* Outline variants */
  .badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
  }

  /* Size variants */
  .badge--sm {
    padding: calc(var(--block-space-quarter) / 2) var(--block-space-half);
    font-size: var(--text-small);
  }

  .badge--lg {
    padding: var(--block-space-half) var(--block-space);
    font-size: var(--text-large);
  }

  /* Dot indicator */
  .badge__dot {
    width: var(--status-dot-size);
    height: var(--status-dot-size);
    border-radius: var(--radius-full);
    background-color: currentColor;
  }

  /* With icon */
  .badge .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  /* Verified badge (author bio) */
  .verified-badge {
    width: var(--icon-lg);
    height: var(--icon-lg);
    background-color: var(--color-green-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Badge position (top-right corner) */
  .badge-position {
    inset-block-start: var(--block-space-half);
    inset-inline-end: var(--block-space-half);
  }

  /* Admin-density overrides */
  body.full .badge {
    padding: calc(var(--block-space-quarter) / 2) var(--block-space-half);
    font-size: var(--text-small);
  }
}