.q-skeleton {
    background: rgba(0, 0, 0, .12);
    border-radius: 4px;
    box-sizing: border-box;

    &::before {
        content: '\00a0'
    }

    &--type-circle {
        height: 48px;
        width: 48px;
        border-radius: 50%;
    }

    &--bordered {
        border: 1px solid rgba(0, 0, 0, .05)
    }

    &--square {
        border-radius: 0;
    }

    &--anim-fade {
        animation: q-skeleton--fade 1.5s linear .5s infinite
    }

    &--anim-pulse {
        animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
    }

    &--anim-pulse-x {
        animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
    }

    &--anim-pulse-y {
        animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
    }

    &--anim-wave,
    &--anim-blink,
    &--anim-pop {
        position: relative;
        overflow: hidden;
        z-index: 1;

        &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 0;
        }
    }

    &--anim-blink:after {
        background: rgba(255, 255, 255, .7);
        animation: q-skeleton--fade 1.5s linear .5s infinite
    }

    &--anim-wave:after {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
        animation: q-skeleton--wave 1.5s linear .5s infinite
    }

    &--dark {
        background: rgba(255, 255, 255, 0.05);

        &.q-skeleton--bordered {
            border: 1px solid rgba(255, 255, 255, .25)
        }

        &.q-skeleton--anim-wave:after {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
        }

        &.q-skeleton--anim-blink:after {
            background: rgba(255, 255, 255, .2)
        }
    }
}

@keyframes q-skeleton--fade {
    0% {
        opacity: 1
    }
    50% {
        opacity: .4
    }
    100% {
        opacity: 1
    }
}

@keyframes q-skeleton--pulse {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(.85)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes q-skeleton--pulse-x {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scaleX(.75)
    }
    100% {
        transform: scaleX(1)
    }
}

@keyframes q-skeleton--pulse-y {
    0% {
        transform: scaleY(1)
    }
    50% {
        transform: scaleY(.75)
    }
    100% {
        transform: scaleY(1)
    }
}

@keyframes q-skeleton--wave {
    0% {
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(100%)
    }
}
