$skeleton-prefix-cls: #{$prefix}-skeleton;
$skeleton-avatar-prefix-cls: #{$skeleton-prefix-cls}-avatar;
$skeleton-title-prefix-cls: #{$skeleton-prefix-cls}-title;
$skeleton-paragraph-prefix-cls: #{$skeleton-prefix-cls}-paragraph;
$skeleton-button-prefix-cls: #{$skeleton-prefix-cls}-button;
$skeleton-input-prefix-cls: #{$skeleton-prefix-cls}-input;
$skeleton-image-prefix-cls: #{$skeleton-prefix-cls}-image;
$margin-md: 16px;
$margin-sm: 12px;
$skeleton-block-radius: 4px;
$skeleton-color: rgba(190, 190, 190, 0.2);
$avatar-size-base: 32px;
$avatar-size-lg: 40px;
$avatar-size-sm: 24px;
$skeleton-title-height: 16px;
$skeleton-title-paragraph-margin-top: 24px;
$skeleton-paragraph-li-height: 16px;
$skeleton-paragraph-li-margin-top: $margin-md;
$skeleton-paragraph-margin-top: 28px;
$skeleton-to-color: shade($skeleton-color, 5%);
$border-radius-base: 2px;

$height-base: 32px;
$height-lg: 40px;
$height-sm: 24px;
$btn-height-base: $height-base;
$btn-height-lg: $height-lg;
$btn-height-sm: $height-sm;

$avatar-size-base: 32px;
$avatar-size-lg: 40px;
$avatar-size-sm: 24px;

$input-height-base: $height-base;
$input-height-lg: $height-lg;
$input-height-sm: $height-sm;

$image-size-base: 48px;
@mixin skeleton-element-avatar {
  display: inline-block;
  vertical-align: top;
  background: $skeleton-color;
  @include skeleton-element-avatar-size($avatar-size-base);

  &-lg {
    @include skeleton-element-avatar-size($avatar-size-lg);
  }

  &-sm {
    @include skeleton-element-avatar-size($avatar-size-sm);
  }
}
@mixin skeleton-element-common-size($size) {
  height: $size;
  line-height: $size;
}
@mixin skeleton-element-avatar-size($size) {
  width: $size;
  @include skeleton-element-common-size($size);
  &.#{$skeleton-avatar-prefix-cls}-circle {
    border-radius: 50%;
  }
}
@mixin skeleton-color() {
  background: linear-gradient(
    90deg,
    $skeleton-color 25%,
    $skeleton-to-color 37%,
    $skeleton-color 63%
  );
  background-size: 400% 100%;
  animation: #{$skeleton-prefix-cls}-loading 1.4s ease infinite;
}
.#{$skeleton-prefix-cls} {
  display: table;
  width: 100%;

  &-header {
    display: table-cell;
    padding-right: 16px;
    vertical-align: top;

    // Avatar
    .#{$skeleton-avatar-prefix-cls} {
      @include skeleton-element-avatar();
    }
  }

  &-content {
    display: table-cell;
    width: 100%;
    vertical-align: top;

    // Title
    .#{$skeleton-title-prefix-cls} {
      width: 100%;
      height: $skeleton-title-height;
      margin-top: 16px;
      background: $skeleton-color;
      border-radius: $skeleton-block-radius;

      &.#{$skeleton-paragraph-prefix-cls} {
        margin-top: $skeleton-title-paragraph-margin-top;
      }
    }

    // paragraph
    .#{$skeleton-paragraph-prefix-cls} {
      padding: 0;

      & > li {
        width: 100%;
        height: $skeleton-paragraph-li-height;
        list-style: none;
        background: $skeleton-color;
        border-radius: $skeleton-block-radius;

        &:last-child:not(:first-child):not(:nth-child(2)) {
          width: 61%;
        }

        & + li {
          margin-top: $skeleton-paragraph-li-margin-top;
        }
      }
    }
  }

  &-with-avatar &-content {
    // Title
    .#{$skeleton-title-prefix-cls} {
      margin-top: $margin-sm;

      & + .#{$skeleton-paragraph-prefix-cls} {
        margin-top: $skeleton-paragraph-margin-top;
      }
    }
  }

  &-round &-content {
    .#{$skeleton-title-prefix-cls},
    .#{$skeleton-paragraph-prefix-cls} > li {
      border-radius: 100px;
    }
  }

  // With active animation
  &.#{$skeleton-prefix-cls}-active {
    & .#{$skeleton-prefix-cls}-content {
      .#{$skeleton-title-prefix-cls},
      .#{$skeleton-paragraph-prefix-cls} > li {
        @include skeleton-color();
      }
    }

    .#{$skeleton-avatar-prefix-cls} {
      @include skeleton-color();
    }

    .#{$skeleton-button-prefix-cls} {
      @include skeleton-color();
    }

    .#{$skeleton-input-prefix-cls} {
      @include skeleton-color();
    }

    .#{$skeleton-image-prefix-cls} {
      @include skeleton-color();
    }
  }
  @mixin skeleton-element-avatar-size($size) {
    width: $size;
    @include skeleton-element-common-size($size);

    &.#{$skeleton-avatar-prefix-cls}-circle {
      border-radius: 50%;
    }
  }

  @mixin skeleton-element-button-size($size) {
    width: $size * 2;
    @include skeleton-element-common-size($size);

    &.#{$skeleton-button-prefix-cls}-circle {
      width: $size;
      border-radius: 50%;
    }

    &.#{$skeleton-button-prefix-cls}-round {
      border-radius: $size;
    }
  }

  @mixin skeleton-element-input-size($size) {
    width: 100%;
    @include skeleton-element-common-size($size);
  }

  @mixin skeleton-element-image-size($size) {
    width: $size;
    @include skeleton-element-common-size($size);

    &.#{$skeleton-image-prefix-cls}-circle {
      border-radius: 50%;
    }
  }
  @mixin skeleton-element-common-size($size) {
    height: $size;
    line-height: $size;
  }

  // Button
  @mixin skeleton-element-button() {
    display: inline-block;
    vertical-align: top;
    background: $skeleton-color;
    border-radius: $border-radius-base;

    @include skeleton-element-button-size($btn-height-base);

    &-lg {
      @include skeleton-element-button-size($btn-height-lg);
    }

    &-sm {
      @include skeleton-element-button-size($btn-height-sm);
    }
  }
  // Avatar
  @mixin skeleton-element-avatar() {
    display: inline-block;
    vertical-align: top;
    background: $skeleton-color;

    @include skeleton-element-avatar-size($avatar-size-base);

    &-lg {
      @include skeleton-element-avatar-size($avatar-size-lg);
    }

    &-sm {
      @include skeleton-element-avatar-size($avatar-size-sm);
    }
  }

  // Input
  @mixin skeleton-element-input() {
    display: inline-block;
    vertical-align: top;
    background: $skeleton-color;

    @include skeleton-element-input-size($input-height-base);

    &-lg {
      @include skeleton-element-input-size($input-height-lg);
    }

    &-sm {
      @include skeleton-element-input-size($input-height-sm);
    }
  }

  // Image
  @mixin skeleton-element-image() {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    background: $skeleton-color;

    @include skeleton-element-image-size($image-size-base * 2);

    &-path {
      fill: #bfbfbf;
    }

    &-svg {
      @include skeleton-element-image-size($image-size-base);
      max-width: $image-size-base * 4;
      max-height: $image-size-base * 4;
    }
  }
  // Skeleton element
  &-element {
    display: inline-block;
    width: auto;

    .#{$skeleton-button-prefix-cls} {
      @include skeleton-element-button();
    }

    .#{$skeleton-avatar-prefix-cls} {
      @include skeleton-element-avatar();
    }

    .#{$skeleton-input-prefix-cls} {
      @include skeleton-element-input();
    }

    .#{$skeleton-image-prefix-cls} {
      @include skeleton-element-image();
    }
  }
}
@keyframes #{$skeleton-prefix-cls}-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}