/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-status, mk-status--
 */
/* Component: mk_status */
.mk-status {
  min-height: var(--mk-space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-1);
  padding: 0 var(--mk-space-3);
  border: 1px solid var(--mk-color-line);
  border-radius: var(--mk-radius-control);
  background: var(--mk-color-surface-soft);
  color: var(--mk-color-muted);
  font-size: var(--mk-font-size-sm);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.mk-status--primary {
  border-color: rgb(var(--mk-accent-rgb) / .24);
  background: rgb(var(--mk-accent-rgb) / .08);
  color: var(--mk-color-accent);
}

.mk-status--success {
  border-color: var(--mk-color-success-line);
  background: var(--mk-color-success-bg);
  color: var(--mk-color-success);
}

.mk-status--warning {
  border-color: var(--mk-color-warning-line);
  background: var(--mk-color-warning-bg);
  color: var(--mk-color-warning);
}

.mk-status--danger {
  border-color: var(--mk-color-danger-line);
  background: var(--mk-color-danger-bg);
  color: var(--mk-color-danger);
}

.mk-status--neutral {
  border-color: var(--mk-color-line-strong);
  background: var(--mk-color-surface-soft);
  color: var(--mk-color-muted);
}