// variables
$skeleton-line-height: 10px;

$skeleton-line-widths: (156px, 235px, 200px);

// animation
@keyframes blockTextShine {
  0% {
    transform: translateX(-468px);
  }

  100% {
    transform: translateX(468px);
  }
}

// mixins
@mixin gl-tmp-skeleton-loading-shine-background {
  background-image: linear-gradient(
    to right,
    $gray-100 0%,
    $gray-50 20%,
    $gray-100 40%,
    $gray-100 100%
  );
}

@mixin gl-tmp-skeleton-loading-shine-animation {
  animation: blockTextShine 1s linear infinite forwards;
}

.animation-container {
  @include gl-h-8;
  @include gl-overflow-hidden;

  &.animation-container-small {
    @include gl-h-4;
  }

  [class^='skeleton-line-'] {
    height: $skeleton-line-height;
    @include gl-relative;
    @include gl-bg-gray-50;
    @include gl-overflow-hidden;

    &:not(:last-of-type) {
      @include gl-mb-2;
    }

    &::after {
      height: $skeleton-line-height;
      @include gl-content-empty;
      @include gl-display-block;
      @include gl-bg-no-repeat;
      @include gl-bg-size-cover;
      @include gl-tmp-skeleton-loading-shine-background;
      @include gl-tmp-skeleton-loading-shine-animation;
    }
  }
}

@for $count from 1 through length($skeleton-line-widths) {
  .skeleton-line-#{$count} {
    width: nth($skeleton-line-widths, $count);
  }
}