.container {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  white-space: nowrap;
  border-radius: var(--border-radius-default);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-neutral);
  color: var(--color-fg-default);
  font-family: var(--font-family);
  font-weight: var(--font-weight-default);
  /* All text here is single-line and vertically centered via flex, so use a
     tight line-height instead of the paragraph-oriented default — that
     avoids uneven leading around the glyphs at different font-sizes. */
  line-height: 1;
  --attribute-chip-padding-inline: var(--spacing-xxs);
  padding-inline: var(--attribute-chip-padding-inline);
}

.label,
.value,
.marker {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.label {
  color: var(--color-fg-subtle);
  font-size: 0.85em;
}

.value {
  font-weight: var(--font-weight-medium);
}

.marker {
  inline-size: var(--border-width-medium);
  block-size: 0.9em;
  flex: 0 0 auto;
  border-radius: var(--border-radius-sm);
  background: var(--attribute-chip-marker-color, var(--color-brand));
  margin-inline: var(--spacing-2xs) var(--spacing-2xs);
}

.separator {
  color: var(--color-border-default);
}

/* Sizes */
.sm {
  height: var(--component-size-xs);
  font-size: var(--font-size-xs);
}

.md {
  height: var(--component-size-sm);
  font-size: var(--font-size-sm);
}

.lg {
  height: var(--component-size-md);
  font-size: var(--font-size-md);
}