@import "../../../backend/assets/less/core/boot.less";

//
// Stripe loading indicator
// --------------------------------------------------

body.oc-loading, body.oc-loading * {
    cursor: wait !important;
}

@stripe-loader-color: #0090c0;
@stripe-loader-height: 5px;
.stripe-loading-indicator {

    height: @stripe-loader-height;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2000;

    .stripe, .stripe-loaded {
        height: @stripe-loader-height;
        display: block;
        background: @stripe-loader-color;
        position: absolute;
        .box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
    }

    .stripe {
        width: 100%;
        .animation(infinite-loader 60s linear);
    }

    .stripe-loaded {
        width: 0;
        .opacity(0);
    }

    &.loaded {
        .opacity(0);
        .transition(opacity .4s linear);
        .transition-delay(.3s);
        .stripe-loaded {
            .opacity(1);
            .transition(width .3s linear);
            width: 100% !important;
        }
    }

    &.hide {
        display: none;
    }
}

//
// Infinite loading animation
// --------------------------------------------------

@startCount: 1;
@startVal: 28%;
@start: 0;
.infinite-class (@index, @val, @count) when (@index = 0) {
    @tmpSelector: ~"@{index}%";
    @{tmpSelector} { width: 0%; }
    .infinite-class(@index + 10, @val + (@val / (@count * 2)), @count + 1);
}
.infinite-class (@index, @val, @count) when (@index < 101) and (@index > 9) {
    @tmpSelector: ~"@{index}%";
    @{tmpSelector} { width: @val; }
    .infinite-class(@index + 10, @val + (@val / @count), @count * 2);
}

@-moz-keyframes infinite-loader {
    .infinite-class(@start, @startVal, @startCount);
}
@-webkit-keyframes infinite-loader {
    .infinite-class(@start, @startVal, @startCount);
}
@-o-keyframes infinite-loader {
    .infinite-class(@start, @startVal, @startCount);
}
@-ms-keyframes infinite-loader {
    .infinite-class(@start, @startVal, @startCount);
}
@keyframes infinite-loader {
    .infinite-class(@start, @startVal, @startCount);
}