@keyframes bbr-skeleton-shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

%bbr-skeleton-base {
    background: linear-gradient(
        90deg,
        hsl(0, 0%, 88%) 25%,
        hsl(0, 0%, 94%) 50%,
        hsl(0, 0%, 88%) 75%
    );
    background-size: 800px 100%;
    animation: bbr-skeleton-shimmer 1.4s infinite linear;
    border-radius: 4px;
}

.bbr-skeleton {
    &__text {
        @extend %bbr-skeleton-base;
        height: 1em;
        width: 100%;
    }

    &__text-group {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        width: 100%;
    }

    &__block {
        @extend %bbr-skeleton-base;
        width: 100%;
        height: 1rem;
    }

    &__avatar {
        @extend %bbr-skeleton-base;
        border-radius: 50%;
        flex-shrink: 0;

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

    &__button {
        @extend %bbr-skeleton-base;
        border-radius: 4px;
    }
}