@import './theme/default';

.zent-placeholder-shape {
  background-color: $theme-stroke-7;

  &--animate {
    animation: zent-ani-placeholder-bg 2s linear infinite;
    background: linear-gradient(
      to right,
      rgba($theme-stroke-7, 0.7),
      $theme-stroke-7,
      $theme-stroke-8
    );
    background: linear-gradient(
      to right,
      theme-rgba(stroke, 7, 0.7),
      theme-rgb(stroke, 7),
      theme-rgb(stroke, 8)
    );
    background-size: 300% 300%;
  }
}

.zent-placeholder-text-row,
.zent-placeholder-text-row-dashed .zent-placeholder-shape {
  width: 100%;
  height: 1em;
}

.zent-placeholder-text-row-dashed {
  display: flex;

  &-segment {
    box-sizing: border-box;
  }
}

.zent-placeholder-circle {
  border-radius: 50%;
}

@keyframes zent-ani-placeholder-bg {
  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}