:root {
  --animate-duration: 1s;
}

sl-illustration.icon-illustration {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
sl-illustration .icon-background {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
sl-illustration .icon-background-alert {
  background-color: #5f4a02;
}
sl-illustration .icon-background-error {
  background-color: #892c01;
}
sl-illustration .icon-background-information {
  background-color: #0036a7;
}
sl-illustration .icon-background-success {
  background-color: #045300;
}
sl-illustration sdx-icon {
  position: relative;
  z-index: 1;
}
sl-illustration .skeleton-loader {
  -webkit-animation: loading 1.2s ease-in-out infinite;
  animation: loading 1.2s ease-in-out infinite;
  background: linear-gradient(100deg, #eff1f2 30%, #f6f7f8 50%, #eff1f2 70%);
  background-size: 400%;
  border-radius: 50%;
}
@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}