.hl-skeleton {
  display: flex;
  flex-direction: row;
  &__title {
    width: 40%;
    height: 16px;
    margin: 0;
    background-color: #f2f3f5;
  }
  &__row {
    height: 16px;
    background-color: #f2f3f5;
  }
  &__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 16px;
    background-color: #f2f3f5;
  }
  &__content {
    flex: 1;
  }
  &--round {
    .hl-skeleton__title,
    .hl-skeleton__row {
      border-radius: 5px;
    }
  }
  &--animate {
    animation: hl-skeleton-blink 1.2s ease-in-out infinite;
  }
  @keyframes hl-skeleton-blink {
    50% {
      opacity: 0.6;
    }
  }
}