@import '../../style/themes/index';
@import '../../style/mixins/index';

@yee-skeleton-prefix-cls: ~'@{yee-prefix}-skeleton';
@yee-skeleton-avatar-prefix-cls: ~'@{yee-skeleton-prefix-cls}-avatar';
@yee-skeleton-title-prefix-cls: ~'@{yee-skeleton-prefix-cls}-title';
@yee-skeleton-paragraph-prefix-cls: ~'@{yee-skeleton-prefix-cls}-paragraph';

@yee-skeleton-to-color: shade(@skeleton-color, 5%);

.@{yee-skeleton-prefix-cls} {
  display: table;
  width: 100%;

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

    // Avatar
    .@{yee-skeleton-avatar-prefix-cls} {
      display: inline-block;
      vertical-align: top;
      background: @skeleton-color;

      .yee-avatar-size(@yee-avatar-size-base);

      &-lg {
        .yee-avatar-size(@yee-avatar-size-lg);
      }

      &-sm {
        .yee-avatar-size(@yee-avatar-size-sm);
      }
    }
  }

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

    // Title
    .@{yee-skeleton-title-prefix-cls} {
      width: 100%;
      height: 16px;
      margin-top: 16px;
      background: @skeleton-color;

      + .@{yee-skeleton-paragraph-prefix-cls} {
        margin-top: 24px;
      }
    }

    // paragraph
    .@{yee-skeleton-paragraph-prefix-cls} {
      padding: 0;

      > 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
    .@{yee-skeleton-title-prefix-cls} {
      margin-top: 12px;

      + .@{yee-skeleton-paragraph-prefix-cls} {
        margin-top: 28px;
      }
    }
  }

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

    .@{yee-skeleton-avatar-prefix-cls} {
      .yee-skeleton-color();
    }
  }
}

.yee-avatar-size(@size) {
  width: @size;
  height: @size;
  line-height: @size;

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

.yee-skeleton-color() {
  background: linear-gradient(90deg, @skeleton-color 25%, @yee-skeleton-to-color 37%, @skeleton-color 63%);
  background-size: 400% 100%;
  animation: ~'@{yee-skeleton-prefix-cls}-loading' 1.4s ease infinite;
}

@keyframes ~"@{yee-skeleton-prefix-cls}-loading" {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}