:host {
  display: inline-flex;
}
:host svg {
  width: 100%;
  height: auto;
  vertical-align: top;
}

:host([theme=auto]) {
  color-scheme: light dark;
}

:host([theme=light]) {
  color-scheme: light;
}

:host([theme=dark]) {
  color-scheme: dark;
}

:host([data-error=true]) .status {
  background: var(--r-illustration--status--background, var(--r-haze-500));
  height: var(--r-illustration--status--height, 100%);
  display: var(--r-illustration--status--display, flex);
  justify-content: var(--r-illustration--status--justify-content, center);
  align-items: var(--r-illustration--status--align-items, center);
  aspect-ratio: var(--r-illustration--status--aspect-ratio, 342/176);
}
:host([data-error=true]) .status-icon {
  width: var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));
  position: var(--r-illustration--status-info--position, relative);
}
:host([data-error=true]) .status-marker {
  width: var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));
  position: var(--r-illustration--status-marker--position, absolute);
  top: var(--r-illustration--status-marker--top, 100%);
  left: var(--r-illustration--status-marker--left, 100%);
  transform: var(--r-illustration--status-marker--transform, translate(-65%, -65%));
}

.r-illustration {
  display: var(--r-illustration--display, flex);
  justify-content: var(--r-illustration--justify-content, center);
  align-items: var(--r-illustration--align-items, center);
  background: var(--r-illustration--background, transparent);
  aspect-ratio: var(--r-illustration--aspect-ratio, 342/176);
  width: var(--r-illustration--width, 100%);
  min-width: var(--r-illustration--min-width, auto);
  max-width: var(--r-illustration--max-width, 100%);
  height: var(--r-illustration--height, auto);
}