@import "mixins/mixins";

@mixin avatar-size($size) {
  width: $size;
  height: $size;
  line-height: $size;
}

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

@keyframes skeletonLoading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


@include b(skeleton) {
  display: table;
  width: 100%;

  &-avatar {
    &-circle {
      border-radius: 50%;
    }
    display: inline-block;
    vertical-align: top;
    background: $--skeleton-color;

    @include avatar-size($--avatar-medium-size);

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

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

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

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

    // Title
    @include b(skeleton-title) {
      width: 100%;
      height: 16px;
      margin-top: 16px;
      background: $--skeleton-color;

      @include m(skeleton-paragraph) {
        margin-top: 24px;
      }
    }

    // paragraph
    @include b(skeleton-paragraph) {
      > li {
        width: 100%;
        height: 16px;
        list-style: none;
        background: $--skeleton-color;

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

        + li {
          margin-top: 16px;
        }
      }
    }
  }

  &-with-avatar &-content {
    // Title
    @include b(skeleton-title) {
      margin-top: 12px;

      @include m(skeleton-paragraph) {
        margin-top: 28px;
      }
    }
  }

  // With active animation
  &.el-skeleton-active {
    @include b(skeleton-content) {
      .el-skeleton-title,
      .el-skeleton-paragraph > li {
        @include skeleton-color;
      }
    }

    @include b(skeleton-avatar) {
      @include skeleton-color;
    }
  }
}

ol, ul, dl {
  margin: 0;
  padding: 0;
}