@layer components {

/* ── Aegis Chip (ported from data-display-chip--guidelines) ──
 * Pill-shaped indicator. Two patterns:
 *   1. Input/filter chips (filled or outlined; optional leading
 *      icon/avatar; optional trailing × close button).
 *   2. Status chips (filled, 5 colors: success/warning/error/secondary/info).
 * Color via modifier (--primary, --default, --success, --warning,
 * --error, --info, --secondary). Variant via --outlined (default = filled). */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* MODEC chip size: 32px tall (MUI sizeMedium default), with the label-text
   * spec applied to the inner text via padding-inline + font properties below.
   *   padding-inline 6px  — gutter around label
   *   padding-block  0    — vertical centering handled by flex + height
   *   font-size 12px, line-height 19.92px (= 12 × 1.66, MODEC caption)
   */
  height: 32px;
  padding-inline: 6px;
  padding-block: 0;
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-regular);  /* unbold for all chips */
  line-height: 19.92px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--c-neutral-200);
  color: var(--color-text-primary);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-full);
  cursor: default;
  user-select: none;
  vertical-align: middle;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Filled color variants */
.ds-chip--primary   { background: var(--color-accent);   color: var(--color-accent-text); border-color: var(--color-accent); }
.ds-chip--default   { background: var(--c-neutral-200);  color: var(--color-text-primary); border-color: transparent; }
.ds-chip--success   { background: var(--c-success-500);  color: var(--color-accent-text); border-color: var(--c-success-500); }
.ds-chip--warning   { background: var(--c-warning-500);  color: var(--color-accent-text); border-color: var(--c-warning-500); }
.ds-chip--error     { background: var(--c-danger-500);   color: var(--color-accent-text); border-color: var(--c-danger-500); }
.ds-chip--secondary { background: var(--c-secondary-500); color: var(--color-accent-text); border-color: var(--c-secondary-500); }
.ds-chip--info      { background: var(--c-info-500);     color: var(--color-accent-text); border-color: var(--c-info-500); }

/* Outlined modifier — keeps color hue but flips to transparent bg + colored border */
.ds-chip--outlined { background: transparent; }
.ds-chip--outlined.ds-chip--primary   { color: var(--color-accent);    border-color: var(--color-accent); }
.ds-chip--outlined.ds-chip--default   { color: var(--color-text-primary); border-color: var(--color-border-default); }
.ds-chip--outlined.ds-chip--success   { color: var(--c-success-700);   border-color: var(--c-success-500); }
.ds-chip--outlined.ds-chip--warning   { color: var(--c-warning-700);   border-color: var(--c-warning-500); }
.ds-chip--outlined.ds-chip--error     { color: var(--c-danger-700);    border-color: var(--c-danger-500); }
.ds-chip--outlined.ds-chip--secondary { color: var(--c-secondary-700); border-color: var(--c-secondary-500); }
.ds-chip--outlined.ds-chip--info      { color: var(--c-info-700);      border-color: var(--c-info-500); }

/* Clickable chip — adds hover/active treatment */
.ds-chip--clickable { cursor: pointer; }
.ds-chip--clickable:hover { filter: brightness(0.94); }
.ds-chip--clickable:active { filter: brightness(0.88); }
.ds-chip--clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.3);
}

/* Disabled */
.ds-chip:disabled,
.ds-chip.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Leading icon — small SVG before label */
.ds-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: -4px;
  flex-shrink: 0;
}
.ds-chip__icon svg { width: 16px; height: 16px; }

/* Leading avatar — small circle before label */
.ds-chip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -6px;
  border-radius: var(--radius-full);
  background: var(--c-neutral-300);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  overflow: hidden;
}
.ds-chip__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Trailing close (×) button — for input/filter chips */
.ds-chip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: -4px;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s ease;
}
.ds-chip__close:hover  { background: rgba(0, 0, 0, 0.32); }
.ds-chip__close:active { background: rgba(0, 0, 0, 0.42); }
.ds-chip--outlined .ds-chip__close { background: rgba(0, 0, 0, 0.08); }
.ds-chip--outlined .ds-chip__close:hover { background: rgba(0, 0, 0, 0.18); }

/* Size variants */
.ds-chip--sm { padding: 2px 8px; font-size: 10px; }
.ds-chip--sm .ds-chip__icon, .ds-chip--sm .ds-chip__close { width: 12px; height: 12px; }
.ds-chip--sm .ds-chip__avatar { width: 16px; height: 16px; font-size: 9px; }
.ds-chip--lg { padding: 6px 14px; font-size: var(--font-size-sm); }

/* Round modifier — width matches height for short content (single digits
 * render as a perfect circle); content grows it horizontally when needed
 * (2+ digit counts become an oval pill). Common use: numeric counters
 * inside a `.ds-table` cell, e.g. test-case count per requirement. */
.ds-chip--round {
  min-width: 32px;
  padding-inline: 8px;
  justify-content: center;
}

} /* end @layer components */