@import 'mixins/mixins';
@import 'common/var';
@import "./skeleton-item.scss";

@mixin skeleton-color() {
  background: linear-gradient(
    90deg,
    $--skeleton-color 25%,
    $--skeleton-to-color 37%,
    $--skeleton-color 63%
  );
  background-size: 400% 100%;
  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
}

@keyframes #{$namespace}-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@include b(skeleton) {
  width: 100%;
  @each $unit in (first-line, paragraph) {
    @include e($unit) {
      height: 16px;
      margin-top: 16px;
      background: $--skeleton-color;
    }
  }

  @include when(animated) {
    .#{$namespace}-skeleton__item {
      @include skeleton-color();
    }
  }
}