/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 500;
}

.badge-green { background: var(--color-green-light); color: var(--color-green-dark); }
.badge-blue  { background: var(--color-blue-light); color: var(--color-blue); }
.badge-red {
  background: color-mix(in srgb, var(--color-danger-bg) 85%, var(--color-bg));
  color: var(--color-danger-strong);
  border: 1px solid color-mix(in srgb, var(--color-danger-border) 70%, transparent);
}
.badge-gray {
  background: color-mix(in srgb, var(--color-border) 35%, var(--color-bg));
  color: var(--color-text-muted);
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

/* Hidden */
.hidden { display: none !important; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}