@layer components {
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  background: rgba(105, 224, 255, 0.1);
  font-size: var(--text-sm);
  font-weight: 760;
  line-height: 1;
}

.badge--private {
  border-color: rgba(255, 209, 102, 0.44);
  color: #ffe7a6;
  background: rgba(255, 209, 102, 0.12);
}

.badge--public,
.badge--success {
  border-color: rgba(98, 230, 165, 0.46);
  color: #bdf8d7;
  background: rgba(98, 230, 165, 0.12);
}

.badge--danger {
  border-color: rgba(255, 92, 122, 0.52);
  color: #ffd1da;
  background: rgba(255, 92, 122, 0.12);
}

.chip {
  border-color: var(--color-border-muted);
  color: var(--color-heading);
  background: var(--color-panel-frost);
}

.chip--selected {
  border-color: var(--color-border-strong);
  color: var(--color-on-bright);
  background: var(--color-fill-surface);
}
}