@skeleton-prefix: ~'@{prefix}skeleton';

.@{skeleton-prefix} {
  @keyframes h-skeleton-loading {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }
  display: table;
  width: 100%;
  .h-skeleton-avatar {
    display: table-cell;
    vertical-align: top;
    padding-right: 20px;
    span {
      margin-top: 16px;
      display: inline-block;
      background: @skeleton-bg;
      &.h-skeleton-avatar-circle {
        border-radius: 50%;
      }
    }
  }
  .h-skeleton-content {
    display: table-cell;
    width: 100%;
    .h-skeleton-title {
      height: @skeleton-height;
      background: @skeleton-bg;
    }
    .h-skeleton-paragraph {
      margin-top: 16px;
      > li {
        width: 100%;
        height: @skeleton-height;
        list-style: none;
        background: @skeleton-bg;
      }
      > li + li {
        margin-top: 16px;
      }
    }
  }
  &.h-skeleton-active {
    .h-skeleton-avatar > span,
    .h-skeleton-title,
    .h-skeleton-paragraph > li {
      background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
      background-size: 400% 100%;
      animation: h-skeleton-loading 1.4s ease infinite;
    }
  }
}