/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
@loading-background-height: 8px;
@loading-bar-height: 4px;
@loading-background-color: @primary-800;
@loading-bar-leftright-padding: 2px;
@loading-bar-color: white;

#loading-bar {
    background-color: @loading-background-color;
    height: @loading-background-height;
    position: fixed;
    top: 0px;
    width: 100%;

    .bar {
        position: absolute;
        height: @loading-bar-height;
        top: 50%;
        margin-top: -@loading-bar-height/2;
        background-color: transparent;

        &:after {
            content: '';
            display: block;
            position: absolute;
            top: 0px;
            left: @loading-bar-leftright-padding;
            right: @loading-bar-leftright-padding;
            bottom: 0px;
            background: @loading-bar-color;
            border-radius: @loading-bar-height/2;
        }
    }
    .peg {
        display: none;
    }
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
    transform: translate(0px, -@loading-background-height);
    opacity: 1.0;
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
    transform: translate(0px, 0px);
    opacity: 1.0;
}

#loading-bar-spinner {
    top: @navbar-height + 20px;
    right: 30px;
    left: initial;

    .spinner-icon {
        border-top-color: @primary-800;
        border-left-color: @primary-800;
    }
}