.container {
  --inline-status-bg: var(--color-bg-toolbar);
  --inline-status-fg: var(--color-fg-default);
  --inline-status-border: var(--color-border-subtle);

  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  max-inline-size: 100%;

  padding: var(--spacing-2xs) var(--spacing-sm);
  border: 1px solid var(--inline-status-border);
  border-radius: var(--border-radius-default);
  background: var(--inline-status-bg);
  color: var(--inline-status-fg);

  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-default);
  line-height: var(--line-height-normal);
  box-sizing: border-box;
}

.fullWidth {
  display: flex;
  inline-size: 100%;
}

.leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  block-size: 1lh;
}

.leading svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
  color: currentColor;
}

.body {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.sm {
  font-size: var(--font-size-xs);
}

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

.neutral {
  --inline-status-bg: var(--color-bg-toolbar);
  --inline-status-fg: var(--color-fg-default);
  --inline-status-border: transparent;
}

.success {
  --inline-status-bg: var(--color-status-success-bg);
  --inline-status-fg: var(--color-status-success-fg);
  --inline-status-border: var(--color-status-success-border);
}

.warning {
  --inline-status-bg: var(--color-status-warning-bg);
  --inline-status-fg: var(--color-status-warning-fg);
  --inline-status-border: var(--color-status-warning-border);
}

.error {
  --inline-status-bg: var(--color-status-error-bg);
  --inline-status-fg: var(--color-status-error-fg);
  --inline-status-border: var(--color-status-error-border);
}

.info {
  --inline-status-bg: var(--color-status-info-bg);
  --inline-status-fg: var(--color-status-info-fg);
  --inline-status-border: var(--color-status-info-border);
}

.brand {
  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
  --inline-status-fg: var(--color-brand);
  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.accent {
  --inline-status-bg: var(--color-accent-bg);
  --inline-status-fg: var(--color-accent-fg);
  --inline-status-border: var(--color-accent-border);
}