.status-indicator {
  --si-box: 16px; // small (default)

  display: inline-flex;
  flex: none;
  align-items: center;

  max-width: max-content;

  color: inherit;
}

.status-indicator--medium {
  --si-box: 20px;
}

.status-indicator--interactive {
  cursor: pointer;
}

// hover values used by the `--interactive:hover` / `:focus-within` styling below
.status-indicator--critical {
  --si-color: var(--background--critical-high-default--light);
  --si-color-hover: var(--background--critical-xHigh-hovered--light);
}
.status-indicator--warning {
  --si-color: var(--background--warning-high-default--light);
  --si-color-hover: var(--background--warning-high-hovered--light);
}
.status-indicator--positive {
  --si-color: var(--background--success-high-default--light);
  --si-color-hover: var(--background--success-xHigh-hovered--light);
}
.status-indicator--informative {
  --si-color: var(--background--informative-high-default--light);
  --si-color-hover: var(--background--informative-strong-default--light);
}
.status-indicator--notice {
  --si-color: var(--background--notice-high-default--light);
  --si-color-hover: var(--background--notice-high-hovered--light);
}
.status-indicator--neutral {
  --si-color: var(--background--neutral-xHigh-default--light);
  --si-color-hover: var(--background--neutral-xHigh-hovered--light);
}

.status-indicator__shape {
  display: block;
  flex: none;

  width: var(--si-box);
  height: var(--si-box);

  font-style: initial;
}

.status-indicator--full .status-indicator__geometry {
  fill: rgb(var(--si-color));
  stroke: none;
}

.status-indicator--full .status-indicator__symbol {
  fill: rgb(var(--background--neutral-base-default--light)); // white
}

.status-indicator--outlined .status-indicator__geometry {
  fill: rgb(var(--background--neutral-base-default--light)); // white
  stroke: rgb(var(--si-color));
  // stroke width in viewBox units; outline geometry is inset by half of it so the outer size matches full
  stroke-width: 2;
}

.status-indicator--outlined .status-indicator__symbol {
  fill: rgb(var(--si-color));
}

.status-indicator__symbol {
  font-family: var(--fontFamily--icons);
  font-size: 20px;
  stroke: none;
}

.status-indicator__label {
  margin-left: 0.5rem;
}

// doubled class: typography margins (.typography__headline*) tie the single-class reset
// in specificity and win on import order, so outrank them instead
.status-indicator .status-indicator__label > * {
  margin-block: 0;
}

// focus-within keeps keyboard tooltip triggering visually in sync with hover
.status-indicator--interactive:hover,
.status-indicator--interactive:focus-within {
  --si-color: var(--si-color-hover);
}