@import './var.less';

:root {
  --glm-skeleton-row-height: @skeleton-row-height;
  --glm-skeleton-row-background-color: @skeleton-row-background-color;
  --glm-skeleton-row-margin-top: @skeleton-row-margin-top;
  --glm-skeleton-title-width: @skeleton-title-width;
  --glm-skeleton-avatar-size: @skeleton-avatar-size;
  --glm-skeleton-avatar-background-color: @skeleton-avatar-background-color;
  --glm-skeleton-animation-duration: @skeleton-animation-duration;
}

.glm-skeleton {
  display: flex;
  padding: 0 var(--glm-padding-md);

  &__avatar {
    flex-shrink: 0;
    width: var(--glm-skeleton-avatar-size);
    height: var(--glm-skeleton-avatar-size);
    margin-right: var(--glm-padding-md);
    background: var(--glm-skeleton-avatar-background-color);

    &--round {
      border-radius: var(--glm-border-radius-max);
    }
  }

  &__content {
    width: 100%;
  }

  &__avatar + &__content {
    padding-top: var(--glm-padding-xs);
  }

  &__row,
  &__title {
    height: var(--glm-skeleton-row-height);
    background: var(--glm-skeleton-row-background-color);
  }

  &__title {
    width: var(--glm-skeleton-title-width);
    margin: 0;
  }

  &__row {
    &:not(:first-child) {
      margin-top: var(--glm-skeleton-row-margin-top);
    }
  }

  &__title + &__row {
    margin-top: 20px;
  }

  &--animate {
    animation: van-skeleton-blink var(--glm-skeleton-animation-duration)
      ease-in-out infinite;
  }

  &--round {
    .glm-skeleton__row,
    .glm-skeleton__title {
      border-radius: var(--glm-border-radius-max);
    }
  }
}

@keyframes van-skeleton-blink {
  50% {
    opacity: 0.6;
  }
}