@import 'boxuiVariables';

$doc-first-preloader-padding: 0 20px;

@keyframes box-crawler {
    0%,
    80%,
    100% {
        transform: scaleY(1.2);
        opacity: .5;
    }

    40% {
        transform: scaleY(1.6);
        opacity: 1;
    }
}

.bp-loading-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: .25s opacity;

    .bp-loaded & {
        display: none;
    }
}

// Only the loading wrapper should be interactable inside the Preview container
.bp:not(.bp-loaded) {
    pointer-events: none;

    & .bp-loading-wrapper {
        pointer-events: all;
    }
}

.bp-thumbnails-open.bp-preload-complete {
    pointer-events: all;
}

.bp-presentation-preload-wrapper {
    pointer-events: all;
}

.bp-preloader-loaded {
    margin-right: auto;
    margin-left: auto;
    padding: $doc-first-preloader-padding;
    overflow: auto;
    pointer-events: all;
}

.bp-loading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $twos;
}

.bp-crawler-wrapper {
    display: none;

    .bp-crawler {
        transform: scale(1.5);

        div {
            background-color: $downtown-grey;
        }
    }
}

.bp-crawler {
    text-align: center;

    div {
        display: inline-block;
        width: 2px;
        height: 10px;
        background-color: $box-blue;
        border-radius: 4px;
        animation: box-crawler .66s infinite ease-in-out; // Crawler is 3 short lines pulsing
    }

    div:nth-child(2) {
        margin-left: 2px;
        animation-delay: .1s;
    }

    div:last-child {
        left: 8px;
        margin-left: 2px;
        animation-delay: .2s;
    }
}
