.formatter-illustration {
  --animation-duration: 6s;
  width: 100%;
  height: 420px;
  overflow: hidden;
  position: relative;
}

.formatter-illustration > * {
  width: 100%;
  height: 416px;
}

.formatter-illustration-formatted {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 100;
  animation: fade var(--animation-duration) infinite alternate;
}

.formatter-illustration-codeblock {
  height: 100%;
  overflow: hidden;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 200;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fefefe;
}

.formatter-illustration-unformatted .badge {
  background-color: var(--colorStatusWarningForeground1);
  animation: fade var(--animation-duration) infinite alternate-reverse;
}
.formatter-illustration-formatted .badge {
  background-color: var(--ifm-color-primary);
  animation: fade var(--animation-duration) infinite alternate;
}
