:root,:host {
    --van-skeleton-title-width: 40%
}

.van-skeleton-title {
    height: var(--van-skeleton-paragraph-height);
    background: var(--van-skeleton-paragraph-background)
}

.van-skeleton-title--round {
    border-radius: var(--van-radius-max)
}

.van-skeleton-title {
    width: var(--van-skeleton-title-width);
    margin: 0
}

.van-skeleton-title+.van-skeleton-paragraph {
    margin-top: 20px
}

:root,:host {
    --van-skeleton-avatar-size: 32px;
    --van-skeleton-avatar-background: var(--van-active-color)
}

.van-skeleton-avatar {
    flex-shrink: 0;
    width: var(--van-skeleton-avatar-size);
    height: var(--van-skeleton-avatar-size);
    margin-right: var(--van-padding-md);
    background: var(--van-skeleton-avatar-background)
}

.van-skeleton-avatar--round {
    border-radius: var(--van-radius-max)
}

.van-skeleton-avatar+.van-skeleton__content {
    padding-top: var(--van-padding-xs)
}

:root,:host {
    --van-skeleton-paragraph-height: 16px;
    --van-skeleton-paragraph-background: var(--van-active-color);
    --van-skeleton-paragraph-margin-top: var(--van-padding-sm)
}

.van-skeleton-paragraph {
    height: var(--van-skeleton-paragraph-height);
    background: var(--van-skeleton-paragraph-background)
}

.van-skeleton-paragraph--round {
    border-radius: var(--van-radius-max)
}

.van-skeleton-paragraph:not(:first-child) {
    margin-top: var(--van-skeleton-paragraph-margin-top)
}

:root,:host {
    --van-skeleton-duration: 1.2s
}

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

.van-skeleton__content {
    width: 100%
}

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

@keyframes van-skeleton-blink {
    50% {
        opacity: .6
    }
}