$color-light: #f1f1f1;
$color-dark: #c6c6c6;

.d-shimmer {
  display: flex;
  width: 100%;
  height: 14px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  animation: doku-shimmer-effect 1s linear infinite;
  margin-bottom: 8px;
  background-color: $color-light;
  background-image: linear-gradient(
    to right,
    $color-light 0,
    var(--d-color-neutral-00) 20%,
    $color-light 40%,
    $color-light 100%
  );

  &.d-shimmer-variant-dark {
    background-color: $color-dark;
    background-image: linear-gradient(
      to right,
      $color-dark 0,
      var(--d-color-neutral-00) 20%,
      $color-dark 40%,
      $color-dark 100%
    );
  }
}

@keyframes doku-shimmer-effect {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}