@layer components {

/* ── Aegis Badge (ported from data-display-badge--guidelines) ──
 * Small overlay indicator anchored to a target element (top-right
 * corner) OR standalone. Two variants: standard (with text/number) and
 * dot (small colored circle, no content). Seven colors. */

/* Anchor wrapper — positions a badge over its child */
.ds-badge-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

/* The badge itself */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--c-neutral-200);
  color: var(--color-text-primary);
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
}

/* When inside .ds-badge-wrap → overlay top-right corner of the child */
.ds-badge-wrap > .ds-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
  z-index: 1;
}

/* Color variants (filled) */
.ds-badge--default   { background: transparent;             color: var(--color-text-primary); }
.ds-badge--primary   { background: var(--color-accent);     color: var(--color-accent-text); }
.ds-badge--secondary { background: var(--c-secondary-500);  color: var(--color-accent-text); }
.ds-badge--error     { background: var(--c-danger-500);     color: var(--color-accent-text); }
.ds-badge--warning   { background: var(--c-warning-500);    color: var(--color-accent-text); }
.ds-badge--info      { background: var(--c-info-500);       color: var(--color-accent-text); }
.ds-badge--success   { background: var(--c-success-500);    color: var(--color-accent-text); }

/* Dot variant — no content, just a small colored circle */
.ds-badge--dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
}
.ds-badge-wrap > .ds-badge--dot {
  transform: translate(50%, -50%);
}

/* Sizes */
.ds-badge--sm { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.ds-badge--sm.ds-badge--dot { min-width: 6px; width: 6px; height: 6px; }

} /* end @layer components */