@mixin background {
  /* #ifdef APP-NVUE */
  background-color: #f1f2f4;
  /* #endif */
  /* #ifndef APP-NVUE */
  background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
  background-size: 400% 100%;
  /* #endif */
}

.unip-skeleton {
  flex: 1;
  width: 100%;

  &__wrapper {
    &__avatar {
      @include background;
      margin-right: 15px;

      &--circle {
        border-radius: 100px;
      }

      &--square {
        border-radius: 4px;
      }
    }

    &__title {
      margin-top: 16rpx;
      width: 100%;
      height: 36rpx;
      border-radius: 3px;

      &:first-child {
        margin-top: 0;
      }

      @include background;

      &__list {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
    }

    &__content {
      flex: 1;

      &__rows,
      &__title {
        @include background;
        border-radius: 3px;
      }
    }
  }
}

.animate {
  animation: skeleton 1.8s ease infinite;
}

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

  100% {
    background-position: 0 50%;
  }
}
.unip-skeleton__wrapper__title {
  margin-top: 0.5rem;
  width: 100%;
  height: 1.125rem;
  border-radius: 3px;
  // background: $backgroundL-g-6;
  background-size: 400% 100%;
}