.content-placeholder {
    @extend .mod-rounded-border-2;

    background-color: var(--grey-40);
}

.text-content-placeholder {
    @extend .mod-rounded-border-2;

    width: $text-content-placeholder-medium-width;
    height: $text-content-placeholder-height;

    &.mod-word {
        width: $text-content-placeholder-word-width;
    }

    &.mod-small {
        width: $text-content-placeholder-small-width;
    }

    &.mod-large {
        width: $text-content-placeholder-large-width;
    }
}

.content-placeholder-animated {
    animation: content-placeholder-animated 1.5s infinite;
}

// inspired by https://github.com/buildo/react-placeholder/blob/master/src/reactPlaceholder.scss
@keyframes content-placeholder-animated {
    0% {
        opacity: $content-placeholder-opacity-see-through;
    }

    50% {
        opacity: $content-placeholder-opacity-full;
    }

    100% {
        opacity: $content-placeholder-opacity-see-through;
    }
}