@import '../custom.less';
@import './vars.less';

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

.@{skeleton-prefix-cls} {
  .inject-Skeleton-vars();

  width: 100%;

  &__article {
    display: flex;
    width: 100%;
  }

  &__avatar {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: var(--tv-Skeleton-avatar-size);
    height: var(--tv-Skeleton-avatar-size);
    margin-right: 16px;
  }

  &__section {
    width: 100%;
  }

  &-item__title {
    width: 240px;
    height: 48px;
  }

  &-item__rows {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  &-item--square {
    margin-bottom: 12px;

    &:last-child {
      width: 60%;
      margin-bottom: 0;
    }
  }
}