[data-axi="status_badge"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--box-shadow);
  margin: 5px 10px 5px 0;
  padding: 5px 10px;
}

[data-axi="status_badge"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

[data-axi="status_badge"][data-axi-badge-type="info"] {
  background: color-mix(in srgb, var(--blue-color) 14%, white);
  color: color-mix(in srgb, var(--blue-color) 85%, black);
}

[data-axi="status_badge"][data-axi-badge-type="info"]::before {
  background: var(--blue-color);
}

[data-axi="status_badge"][data-axi-badge-type="success"] {
  background: color-mix(in srgb, var(--green-color) 14%, white);
  color: var(--green-color);
}

[data-axi="status_badge"][data-axi-badge-type="success"]::before {
  background: var(--green-color);
}

[data-axi="status_badge"][data-axi-badge-type="warning"] {
  background: color-mix(in srgb, var(--yellow-color) 22%, white);
  color: color-mix(in srgb, var(--yellow-color) 80%, black);
}

[data-axi="status_badge"][data-axi-badge-type="warning"]::before {
  background: var(--yellow-color);
}

[data-axi="status_badge"][data-axi-badge-type="error"] {
  background: color-mix(in srgb, var(--red-color) 14%, white);
  color: var(--red-color);
}

[data-axi="status_badge"][data-axi-badge-type="error"]::before {
  background: var(--red-color);
}