/**
 * @file
 */

/* Credit: https://github.com/tobiasahlin/SpinKit */

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px);
        transform: perspective(120px);
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg);
        transform: perspective(120px) rotateY(180deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
        transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

/* @todo deprecated and removed media--loading for is-b-loading to make sense outside media. */

.media--loading,
.is-b-loading {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    min-height: 30px;
}

/* Prevents costly double animations when Blur is enabled. */

.media--loading:not([data-animation])::before,
.is-b-loading:not([data-animation])::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    max-width: 30px;
    background: #2eaae0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -15px;
    font-size: 0;
    z-index: 22;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

/**
 * With JS being disabled, the NOSCRIPT tag is replaced by SPAN.
 * No worries about video iframes, they are broken without JS anyway.
 * Hide JS stuffs when being disabled. Ensures to not mess up JS users.
 */

.media--loading>span+.b-lazy,
.media--loading>span+picture,
.media--loading>span+a,
.media--loading.media--player>span~.b-lazy,
.is-b-loading>span+.b-lazy,
.is-b-loading>span+picture,
.is-b-loading>span+a,
.is-b-loading.media--player>span~.b-lazy {
    display: none;
}