//
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
//
//
// Adaptable Pace Stylesheet
//
// @package    theme_adaptable
// @copyright  &copy; 2024 - G J Barnard
// @author     G J Barnard - {@link http://moodle.org/user/profile.php?id=442195}
// @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
//

// From https://codebyzach.github.io/pace/.

// Minimal.
.pace-minimal {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .pace-inactive {
        display: none;
    }

    .pace .pace-progress {
        background: $loadingcolor;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 100%;
        width: 100%;
        height: 2px;
    }
}

// Barber shop.
.pace-barber_shop {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
        width: 100%;
        height: 12px;
        background: #fff;
    }

    .pace-inactive {
        display: none;
    }

    .pace .pace-progress {
        background-color: $loadingcolor;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 100%;
        overflow: hidden;
        height: 12px;
    }

    .pace .pace-activity {
        position: fixed;
        top: 0;
        right: -32px;
        bottom: 0;
        left: 0;
        height: 12px;

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

        background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        -webkit-background-size: 32px 32px;
        -moz-background-size: 32px 32px;
        -o-background-size: 32px 32px;
        background-size: 32px 32px;

        -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
        -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
        -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
        -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
        animation: pace-theme-barber-shop-motion 500ms linear infinite;
    }

    @-webkit-keyframes pace-theme-barber-shop-motion {
        0% {
            -webkit-transform: none;
            transform: none;
        }

        100% {
            -webkit-transform: translate(-32px, 0);
            transform: translate(-32px, 0);
        }
    }

    @-moz-keyframes pace-theme-barber-shop-motion {
        0% {
            -moz-transform: none;
            transform: none;
        }

        100% {
            -moz-transform: translate(-32px, 0);
            transform: translate(-32px, 0);
        }
    }

    @-o-keyframes pace-theme-barber-shop-motion {
        0% {
            -o-transform: none;
            transform: none;
        }

        100% {
            -o-transform: translate(-32px, 0);
            transform: translate(-32px, 0);
        }
    }

    @-ms-keyframes pace-theme-barber-shop-motion {
        0% {
            -ms-transform: none;
            transform: none;
        }

        100% {
            -ms-transform: translate(-32px, 0);
            transform: translate(-32px, 0);
        }
    }

    @keyframes pace-theme-barber-shop-motion {
        0% {
            transform: none;
            transform: none;
        }

        100% {
            transform: translate(-32px, 0);
            transform: translate(-32px, 0);
        }
    }
}

// Big counter.
.pace-big_counter {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .pace.pace-inactive .pace-progress {
        display: none;
    }

    .pace .pace-progress {
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 0;
        height: 5rem;
        width: 5rem;

        -webkit-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .pace .pace-progress:after {
        display: block;
        position: absolute;
        top: 0;
        right: .5rem;
        content: attr(data-progress-text);
        // font-family: "Helvetica Neue", sans-serif;
        // font-weight: 100;
        font-size: 5rem;
        line-height: 1;
        text-align: right;
        color: $loadingcolor;
    }
}

// Bounce.
.pace-bounce {
    .pace {
        width: 140px;
        height: 300px;
        position: fixed;
        top: -90px;
        right: -20px;
        z-index: 2000;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0;
        -webkit-transition: all 2s linear 0s;
        -moz-transition: all 2s linear 0s;
        transition: all 2s linear 0s;
    }

    .pace.pace-active {
        -webkit-transform: scale(.25);
        -moz-transform: scale(.25);
        -ms-transform: scale(.25);
        -o-transform: scale(.25);
        transform: scale(.25);
        opacity: 1;
    }

    .pace .pace-activity {
        width: 140px;
        height: 140px;
        border-radius: 70px;
        background: $loadingcolor;
        position: absolute;
        top: 0;
        z-index: 1911;
        -webkit-animation: pace-bounce 1s infinite;
        -moz-animation: pace-bounce 1s infinite;
        -o-animation: pace-bounce 1s infinite;
        -ms-animation: pace-bounce 1s infinite;
        animation: pace-bounce 1s infinite;
    }

    .pace .pace-progress {
        position: absolute;
        display: block;
        left: 50%;
        bottom: 0;
        z-index: 1910;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
        border-radius: 30px / 40px;
        -webkit-transform: scaleY(.3) !important;
        -moz-transform: scaleY(.3) !important;
        -ms-transform: scaleY(.3) !important;
        -o-transform: scaleY(.3) !important;
        transform: scaleY(.3) !important;
        -webkit-animation: pace-compress .5s infinite alternate;
        -moz-animation: pace-compress .5s infinite alternate;
        -o-animation: pace-compress .5s infinite alternate;
        -ms-animation: pace-compress .5s infinite alternate;
        animation: pace-compress .5s infinite alternate;
    }

    @-webkit-keyframes pace-bounce {
        0% {
            top: 0;
            -webkit-animation-timing-function: ease-in;
        }

        40% {}

        50% {
            top: 140px;
            height: 140px;
            -webkit-animation-timing-function: ease-out;
        }

        55% {
            top: 160px;
            height: 120px;
            border-radius: 70px / 60px;
            -webkit-animation-timing-function: ease-in;
        }

        65% {
            top: 120px;
            height: 140px;
            border-radius: 70px;
            -webkit-animation-timing-function: ease-out;
        }

        95% {
            top: 0;
            -webkit-animation-timing-function: ease-in;
        }

        100% {
            top: 0;
            -webkit-animation-timing-function: ease-in;
        }
    }

    @-moz-keyframes pace-bounce {
        0% {
            top: 0;
            -moz-animation-timing-function: ease-in;
        }

        40% {}

        50% {
            top: 140px;
            height: 140px;
            -moz-animation-timing-function: ease-out;
        }

        55% {
            top: 160px;
            height: 120px;
            border-radius: 70px / 60px;
            -moz-animation-timing-function: ease-in;
        }

        65% {
            top: 120px;
            height: 140px;
            border-radius: 70px;
            -moz-animation-timing-function: ease-out;
        }

        95% {
            top: 0;
            -moz-animation-timing-function: ease-in;
        }

        100% {
            top: 0;
            -moz-animation-timing-function: ease-in;
        }
    }

    @keyframes pace-bounce {
        0% {
            top: 0;
            animation-timing-function: ease-in;
        }

        50% {
            top: 140px;
            height: 140px;
            animation-timing-function: ease-out;
        }

        55% {
            top: 160px;
            height: 120px;
            border-radius: 70px / 60px;
            animation-timing-function: ease-in;
        }

        65% {
            top: 120px;
            height: 140px;
            border-radius: 70px;
            animation-timing-function: ease-out;
        }

        95% {
            top: 0;
            animation-timing-function: ease-in;
        }

        100% {
            top: 0;
            animation-timing-function: ease-in;
        }
    }

    @-webkit-keyframes pace-compress {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
            border-radius: 30px / 40px;
            -webkit-animation-timing-function: ease-in;
        }

        100% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
            border-radius: 20px / 20px;
            -webkit-animation-timing-function: ease-out;
        }
    }

    @-moz-keyframes pace-compress {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
            border-radius: 30px / 40px;
            -moz-animation-timing-function: ease-in;
        }

        100% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
            border-radius: 20px / 20px;
            -moz-animation-timing-function: ease-out;
        }
    }

    @keyframes pace-compress {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
            border-radius: 30px / 40px;
            animation-timing-function: ease-in;
        }

        100% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
            border-radius: 20px / 20px;
            animation-timing-function: ease-out;
        }
    }
}

// Center atom.
.pace-center_atom {
    .pace.pace-inactive {
        display: none;
    }

    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        z-index: 2000;
        position: fixed;
        height: 60px;
        width: 100px;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .pace .pace-progress {
        z-index: 2000;
        position: absolute;
        height: 60px;
        width: 100px;

        -webkit-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .pace .pace-progress:before {
        content: attr(data-progress-text);
        text-align: center;
        color: #fff;
        background: $loadingcolor;
        border-radius: 50%;
        //font-family: "Helvetica Neue", sans-serif;
        font-size: 14px;
        font-weight: 100;
        line-height: 1;
        padding: 12% 0 7px; // 20% 0 7px.
        width: 40%; // 50%.
        height: 65%; // 40%.
        margin: 10px 0 0 30px;
        display: block;
        z-index: 999;
        position: absolute;
    }

    .pace .pace-activity {
        font-size: 15px;
        line-height: 1;
        z-index: 2000;
        position: absolute;
        height: 60px;
        width: 100px;

        display: block;
        -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
        -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
        -o-animation: pace-theme-center-atom-spin 2s linear infinite;
        animation: pace-theme-center-atom-spin 2s linear infinite;
    }

    .pace .pace-activity {
        border-radius: 50%;
        border: 5px solid $loadingcolor;
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 60px;
        width: 100px;
    }

    .pace .pace-activity:after {
        border-radius: 50%;
        border: 5px solid $loadingcolor;
        content: ' ';
        display: block;
        position: absolute;
        top: -5px;
        left: -5px;
        height: 60px;
        width: 100px;

        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .pace .pace-activity:before {
        border-radius: 50%;
        border: 5px solid $loadingcolor;
        content: ' ';
        display: block;
        position: absolute;
        top: -5px;
        left: -5px;
        height: 60px;
        width: 100px;

        -webkit-transform: rotate(120deg);
        -moz-transform: rotate(120deg);
        -o-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    @-webkit-keyframes pace-theme-center-atom-spin {
        0% {
            -webkit-transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(359deg)
        }
    }

    @-moz-keyframes pace-theme-center-atom-spin {
        0% {
            -moz-transform: rotate(0deg)
        }

        100% {
            -moz-transform: rotate(359deg)
        }
    }

    @-o-keyframes pace-theme-center-atom-spin {
        0% {
            -o-transform: rotate(0deg)
        }

        100% {
            -o-transform: rotate(359deg)
        }
    }

    @keyframes pace-theme-center-atom-spin {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(359deg)
        }
    }
}

// Center circle.
.pace-center_circle {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        -webkit-perspective: 12rem;
        -moz-perspective: 12rem;
        -ms-perspective: 12rem;
        -o-perspective: 12rem;
        perspective: 12rem;

        z-index: 2000;
        position: fixed;
        height: 6rem;
        width: 6rem;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .pace.pace-inactive .pace-progress {
        display: none;
    }

    .pace .pace-progress {
        position: fixed;
        z-index: 2000;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 6rem;
        width: 6rem !important;
        line-height: 6rem;
        font-size: 2rem;
        border-radius: 50%;
        background: $loadingcolor;
        color: #fff;
        // font-family: "Helvetica Neue", sans-serif;
        // font-weight: 100;
        text-align: center;

        -webkit-animation: pace-theme-center-circle-spin linear infinite 2s;
        -moz-animation: pace-theme-center-circle-spin linear infinite 2s;
        -ms-animation: pace-theme-center-circle-spin linear infinite 2s;
        -o-animation: pace-theme-center-circle-spin linear infinite 2s;
        animation: pace-theme-center-circle-spin linear infinite 2s;

        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .pace .pace-progress:after {
        content: attr(data-progress-text);
        display: block;
    }

    @-webkit-keyframes pace-theme-center-circle-spin {
        from {
            -webkit-transform: rotateY(0deg)
        }

        to {
            -webkit-transform: rotateY(360deg)
        }
    }

    @-moz-keyframes pace-theme-center-circle-spin {
        from {
            -moz-transform: rotateY(0deg)
        }

        to {
            -moz-transform: rotateY(360deg)
        }
    }

    @-ms-keyframes pace-theme-center-circle-spin {
        from {
            -ms-transform: rotateY(0deg)
        }

        to {
            -ms-transform: rotateY(360deg)
        }
    }

    @-o-keyframes pace-theme-center-circle-spin {
        from {
            -o-transform: rotateY(0deg)
        }

        to {
            -o-transform: rotateY(360deg)
        }
    }

    @keyframes pace-theme-center-circle-spin {
        from {
            transform: rotateY(0deg)
        }

        to {
            transform: rotateY(360deg)
        }
    }
}

// Center radar.
.pace-center_radar {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        z-index: 2000;
        position: fixed;
        height: 90px;
        width: 90px;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .pace.pace-inactive .pace-activity {
        display: none;
    }

    .pace .pace-activity {
        position: fixed;
        z-index: 2000;
        display: block;
        position: absolute;
        left: -30px;
        top: -30px;
        height: 90px;
        width: 90px;
        display: block;
        border-width: 30px;
        border-style: double;
        border-color: $loadingcolor transparent transparent;
        border-radius: 50%;

        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;

        -webkit-animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        -o-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }

    .pace .pace-activity:before {
        content: ' ';
        position: absolute;
        top: 10px;
        left: 10px;
        height: 50px;
        width: 50px;
        display: block;
        border-width: 10px;
        border-style: solid;
        border-color: $loadingcolor transparent transparent;
        border-radius: 50%;

        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    @-webkit-keyframes spin {
        100% {
            -webkit-transform: rotate(359deg);
        }
    }

    @-moz-keyframes spin {
        100% {
            -moz-transform: rotate(359deg);
        }
    }

    @-o-keyframes spin {
        100% {
            -moz-transform: rotate(359deg);
        }
    }

    @keyframes spin {
        100% {
            transform: rotate(359deg);
        }
    }
}

// Center simple.
.pace-center_simple {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        z-index: 2000;
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 200px;
        background: #fff;
        border: 1px solid $loadingcolor;

        overflow: hidden;
    }

    .pace .pace-progress {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

        max-width: 200px;
        position: fixed;
        z-index: 2000;
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        height: 100%;
        width: 100%;
        background: $loadingcolor;
    }

    .pace.pace-inactive {
        display: none;
    }
}

// Corner indicator.
.pace-corner_indicator {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .pace .pace-activity {
        display: block;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 0;
        width: 300px;
        height: 300px;
        background: $loadingcolor;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
        transform: translateX(100%) translateY(-100%) rotate(45deg);
        pointer-events: none;
    }

    .pace.pace-active .pace-activity {
        -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
        transform: translateX(50%) translateY(-50%) rotate(45deg);
    }

    .pace .pace-activity::before,
    .pace .pace-activity::after {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        bottom: 30px;
        left: 50%;
        display: block;
        border: 5px solid #fff;
        border-radius: 50%;
        content: '';
    }

    .pace .pace-activity::before {
        margin-left: -40px;
        width: 80px;
        height: 80px;
        border-right-color: rgba(0, 0, 0, .2);
        border-left-color: rgba(0, 0, 0, .2);
        -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite;
        animation: pace-theme-corner-indicator-spin 3s linear infinite;
    }

    .pace .pace-activity::after {
        bottom: 50px;
        margin-left: -20px;
        width: 40px;
        height: 40px;
        border-top-color: rgba(0, 0, 0, .2);
        border-bottom-color: rgba(0, 0, 0, .2);
        -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite;
        animation: pace-theme-corner-indicator-spin 1s linear infinite;
    }

    @-webkit-keyframes pace-theme-corner-indicator-spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(359deg);
        }
    }

    @keyframes pace-theme-corner-indicator-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(359deg);
        }
    }
}

// Fill left.
.pace-fill_left {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .pace-inactive {
        display: none;
    }

    .pace .pace-progress {
        background-color: $loadingcolorrgba;
        position: fixed;
        z-index: 1; // Fix from -1.
        top: 0;
        right: 100%;
        bottom: 0;
        width: 100%;
    }
}

// Flash.
.pace-flash {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .pace-inactive {
        display: none;
    }

    .pace .pace-progress {
        background: $loadingcolor;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 100%;
        width: 100%;
        height: 2px;
    }

    .pace .pace-progress-inner {
        display: block;
        position: absolute;
        right: 0px;
        width: 100px;
        height: 100%;
        box-shadow: 0 0 10px $loadingcolor, 0 0 5px $loadingcolor;
        opacity: 1.0;
        -webkit-transform: rotate(3deg) translate(0px, -4px);
        -moz-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
        -o-transform: rotate(3deg) translate(0px, -4px);
        transform: rotate(3deg) translate(0px, -4px);
    }

    .pace .pace-activity {
        display: block;
        position: fixed;
        z-index: 2000;
        top: 15px;
        right: 15px;
        width: 14px;
        height: 14px;
        border: solid 2px transparent;
        border-top-color: $loadingcolor;
        border-left-color: $loadingcolor;
        border-radius: 10px;
        -webkit-animation: pace-spinner 400ms linear infinite;
        -moz-animation: pace-spinner 400ms linear infinite;
        -ms-animation: pace-spinner 400ms linear infinite;
        -o-animation: pace-spinner 400ms linear infinite;
        animation: pace-spinner 400ms linear infinite;
    }

    @-webkit-keyframes pace-spinner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-moz-keyframes pace-spinner {
        0% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -moz-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-o-keyframes pace-spinner {
        0% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-ms-keyframes pace-spinner {
        0% {
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes pace-spinner {
        0% {
            transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
}

// Flat top.
.pace-flat_top {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        -webkit-transform: translate3d(0, -50px, 0);
        -ms-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);

        -webkit-transition: transform .5s ease-out;
        -ms-transition: transform .5s ease-out;
        transition: transform .5s ease-out;

        z-index: 2000; // Fix.
    }

    .pace.pace-active {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .pace .pace-progress {
        display: block;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 100%;
        width: 100%;
        height: 10px;
        background: $loadingcolor;

        pointer-events: none;
    }
}

// Loading bar.
.pace-loading_bar {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;

        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;

        z-index: 2000;
        position: fixed;
        margin: auto;
        top: 12px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 200px;
        height: 50px;
        overflow: hidden;
    }

    .pace .pace-progress {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;

        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

        display: block;
        position: absolute;
        right: 100%;
        margin-right: -7px;
        width: 93%;
        top: 7px;
        height: 14px;
        font-size: 12px;
        background: $loadingcolor;
        color: $loadingcolor;
        line-height: 60px;
        // font-weight: bold;
        // font-family: Helvetica, Arial, "Lucida Grande", sans-serif;

        -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
        -ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
        box-shadow: 120px 0 #fff, 240px 0 #fff;
    }

    .pace .pace-progress:after {
        content: attr(data-progress-text);
        display: inline-block;
        position: fixed;
        width: 45px;
        text-align: right;
        right: 0;
        padding-right: 16px;
        top: 4px;
    }

    .pace .pace-progress[data-progress-text="0%"]:after {
        right: -200px
    }

    .pace .pace-progress[data-progress-text="1%"]:after {
        right: -198.14px
    }

    .pace .pace-progress[data-progress-text="2%"]:after {
        right: -196.28px
    }

    .pace .pace-progress[data-progress-text="3%"]:after {
        right: -194.42px
    }

    .pace .pace-progress[data-progress-text="4%"]:after {
        right: -192.56px
    }

    .pace .pace-progress[data-progress-text="5%"]:after {
        right: -190.7px
    }

    .pace .pace-progress[data-progress-text="6%"]:after {
        right: -188.84px
    }

    .pace .pace-progress[data-progress-text="7%"]:after {
        right: -186.98px
    }

    .pace .pace-progress[data-progress-text="8%"]:after {
        right: -185.12px
    }

    .pace .pace-progress[data-progress-text="9%"]:after {
        right: -183.26px
    }

    .pace .pace-progress[data-progress-text="10%"]:after {
        right: -181.4px
    }

    .pace .pace-progress[data-progress-text="11%"]:after {
        right: -179.54px
    }

    .pace .pace-progress[data-progress-text="12%"]:after {
        right: -177.68px
    }

    .pace .pace-progress[data-progress-text="13%"]:after {
        right: -175.82px
    }

    .pace .pace-progress[data-progress-text="14%"]:after {
        right: -173.96px
    }

    .pace .pace-progress[data-progress-text="15%"]:after {
        right: -172.1px
    }

    .pace .pace-progress[data-progress-text="16%"]:after {
        right: -170.24px
    }

    .pace .pace-progress[data-progress-text="17%"]:after {
        right: -168.38px
    }

    .pace .pace-progress[data-progress-text="18%"]:after {
        right: -166.52px
    }

    .pace .pace-progress[data-progress-text="19%"]:after {
        right: -164.66px
    }

    .pace .pace-progress[data-progress-text="20%"]:after {
        right: -162.8px
    }

    .pace .pace-progress[data-progress-text="21%"]:after {
        right: -160.94px
    }

    .pace .pace-progress[data-progress-text="22%"]:after {
        right: -159.08px
    }

    .pace .pace-progress[data-progress-text="23%"]:after {
        right: -157.22px
    }

    .pace .pace-progress[data-progress-text="24%"]:after {
        right: -155.36px
    }

    .pace .pace-progress[data-progress-text="25%"]:after {
        right: -153.5px
    }

    .pace .pace-progress[data-progress-text="26%"]:after {
        right: -151.64px
    }

    .pace .pace-progress[data-progress-text="27%"]:after {
        right: -149.78px
    }

    .pace .pace-progress[data-progress-text="28%"]:after {
        right: -147.92px
    }

    .pace .pace-progress[data-progress-text="29%"]:after {
        right: -146.06px
    }

    .pace .pace-progress[data-progress-text="30%"]:after {
        right: -144.2px
    }

    .pace .pace-progress[data-progress-text="31%"]:after {
        right: -142.34px
    }

    .pace .pace-progress[data-progress-text="32%"]:after {
        right: -140.48px
    }

    .pace .pace-progress[data-progress-text="33%"]:after {
        right: -138.62px
    }

    .pace .pace-progress[data-progress-text="34%"]:after {
        right: -136.76px
    }

    .pace .pace-progress[data-progress-text="35%"]:after {
        right: -134.9px
    }

    .pace .pace-progress[data-progress-text="36%"]:after {
        right: -133.04px
    }

    .pace .pace-progress[data-progress-text="37%"]:after {
        right: -131.18px
    }

    .pace .pace-progress[data-progress-text="38%"]:after {
        right: -129.32px
    }

    .pace .pace-progress[data-progress-text="39%"]:after {
        right: -127.46px
    }

    .pace .pace-progress[data-progress-text="40%"]:after {
        right: -125.6px
    }

    .pace .pace-progress[data-progress-text="41%"]:after {
        right: -123.74px
    }

    .pace .pace-progress[data-progress-text="42%"]:after {
        right: -121.88px
    }

    .pace .pace-progress[data-progress-text="43%"]:after {
        right: -120.02px
    }

    .pace .pace-progress[data-progress-text="44%"]:after {
        right: -118.16px
    }

    .pace .pace-progress[data-progress-text="45%"]:after {
        right: -116.3px
    }

    .pace .pace-progress[data-progress-text="46%"]:after {
        right: -114.44px
    }

    .pace .pace-progress[data-progress-text="47%"]:after {
        right: -112.58px
    }

    .pace .pace-progress[data-progress-text="48%"]:after {
        right: -110.72px
    }

    .pace .pace-progress[data-progress-text="49%"]:after {
        right: -108.86px
    }

    .pace .pace-progress[data-progress-text="50%"]:after {
        right: -107px
    }

    .pace .pace-progress[data-progress-text="51%"]:after {
        right: -105.14px
    }

    .pace .pace-progress[data-progress-text="52%"]:after {
        right: -103.28px
    }

    .pace .pace-progress[data-progress-text="53%"]:after {
        right: -101.42px
    }

    .pace .pace-progress[data-progress-text="54%"]:after {
        right: -99.56px
    }

    .pace .pace-progress[data-progress-text="55%"]:after {
        right: -97.7px
    }

    .pace .pace-progress[data-progress-text="56%"]:after {
        right: -95.84px
    }

    .pace .pace-progress[data-progress-text="57%"]:after {
        right: -93.98px
    }

    .pace .pace-progress[data-progress-text="58%"]:after {
        right: -92.12px
    }

    .pace .pace-progress[data-progress-text="59%"]:after {
        right: -90.26px
    }

    .pace .pace-progress[data-progress-text="60%"]:after {
        right: -88.4px
    }

    .pace .pace-progress[data-progress-text="61%"]:after {
        right: -86.53999999999999px
    }

    .pace .pace-progress[data-progress-text="62%"]:after {
        right: -84.68px
    }

    .pace .pace-progress[data-progress-text="63%"]:after {
        right: -82.82px
    }

    .pace .pace-progress[data-progress-text="64%"]:after {
        right: -80.96000000000001px
    }

    .pace .pace-progress[data-progress-text="65%"]:after {
        right: -79.1px
    }

    .pace .pace-progress[data-progress-text="66%"]:after {
        right: -77.24px
    }

    .pace .pace-progress[data-progress-text="67%"]:after {
        right: -75.38px
    }

    .pace .pace-progress[data-progress-text="68%"]:after {
        right: -73.52px
    }

    .pace .pace-progress[data-progress-text="69%"]:after {
        right: -71.66px
    }

    .pace .pace-progress[data-progress-text="70%"]:after {
        right: -69.8px
    }

    .pace .pace-progress[data-progress-text="71%"]:after {
        right: -67.94px
    }

    .pace .pace-progress[data-progress-text="72%"]:after {
        right: -66.08px
    }

    .pace .pace-progress[data-progress-text="73%"]:after {
        right: -64.22px
    }

    .pace .pace-progress[data-progress-text="74%"]:after {
        right: -62.36px
    }

    .pace .pace-progress[data-progress-text="75%"]:after {
        right: -60.5px
    }

    .pace .pace-progress[data-progress-text="76%"]:after {
        right: -58.64px
    }

    .pace .pace-progress[data-progress-text="77%"]:after {
        right: -56.78px
    }

    .pace .pace-progress[data-progress-text="78%"]:after {
        right: -54.92px
    }

    .pace .pace-progress[data-progress-text="79%"]:after {
        right: -53.06px
    }

    .pace .pace-progress[data-progress-text="80%"]:after {
        right: -51.2px
    }

    .pace .pace-progress[data-progress-text="81%"]:after {
        right: -49.34px
    }

    .pace .pace-progress[data-progress-text="82%"]:after {
        right: -47.480000000000004px
    }

    .pace .pace-progress[data-progress-text="83%"]:after {
        right: -45.62px
    }

    .pace .pace-progress[data-progress-text="84%"]:after {
        right: -43.76px
    }

    .pace .pace-progress[data-progress-text="85%"]:after {
        right: -41.9px
    }

    .pace .pace-progress[data-progress-text="86%"]:after {
        right: -40.04px
    }

    .pace .pace-progress[data-progress-text="87%"]:after {
        right: -38.18px
    }

    .pace .pace-progress[data-progress-text="88%"]:after {
        right: -36.32px
    }

    .pace .pace-progress[data-progress-text="89%"]:after {
        right: -34.46px
    }

    .pace .pace-progress[data-progress-text="90%"]:after {
        right: -32.6px
    }

    .pace .pace-progress[data-progress-text="91%"]:after {
        right: -30.740000000000002px
    }

    .pace .pace-progress[data-progress-text="92%"]:after {
        right: -28.880000000000003px
    }

    .pace .pace-progress[data-progress-text="93%"]:after {
        right: -27.02px
    }

    .pace .pace-progress[data-progress-text="94%"]:after {
        right: -25.16px
    }

    .pace .pace-progress[data-progress-text="95%"]:after {
        right: -23.3px
    }

    .pace .pace-progress[data-progress-text="96%"]:after {
        right: -21.439999999999998px
    }

    .pace .pace-progress[data-progress-text="97%"]:after {
        right: -19.58px
    }

    .pace .pace-progress[data-progress-text="98%"]:after {
        right: -17.72px
    }

    .pace .pace-progress[data-progress-text="99%"]:after {
        right: -15.86px
    }

    .pace .pace-progress[data-progress-text="100%"]:after {
        right: -14px
    }


    .pace .pace-activity {
        position: absolute;
        width: 100%;
        height: 28px;
        z-index: 2001;
        box-shadow: inset 0 0 0 2px $loadingcolor, inset 0 0 0 7px #FFF;
        border-radius: 10px;
    }

    .pace.pace-inactive {
        display: none;
    }
}

.pace-mac_osx {
    .pace {
        -webkit-pointer-events: none;
        pointer-events: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
        width: 100%;
        height: 12px;
        background: transparent; // Fix from #fff.
    }

    .pace-inactive {
        display: none;
    }

    $loadingcolordark: darken($loadingcolor, 12%); // #0087E1 to #00558F.

    .pace .pace-progress {
        background-color: $loadingcolor;
        position: fixed;
        top: 0;
        right: 100%;
        width: 100%;
        height: 12px;
        overflow: hidden;

        -webkit-border-radius: 0 0 4px 0;
        -moz-border-radius: 0 0 4px 0;
        -o-border-radius: 0 0 4px 0;
        border-radius: 0 0 4px 0;

        -webkit-box-shadow: inset -1px 0 $loadingcolordark, inset 0 -1px $loadingcolordark, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
        -moz-box-shadow: inset -1px 0 $loadingcolordark, inset 0 -1px $loadingcolordark, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
        -o-box-shadow: inset -1px 0 $loadingcolordark, inset 0 -1px $loadingcolordark, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
        box-shadow: inset -1px 0 $loadingcolordark, inset 0 -1px $loadingcolordark, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
    }

    .pace .pace-activity {
        position: fixed;
        top: 0;
        left: 0;
        right: -28px;
        bottom: 0;
        height: 12px; // Fix.

        -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
        -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
        -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
        background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);

        -webkit-background-size: 28px 100%;
        -moz-background-size: 28px 100%;
        -o-background-size: 28px 100%;
        background-size: 28px 100%;

        -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
        -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
        -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
        -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
        animation: pace-theme-mac-osx-motion 500ms linear infinite;
    }

    @-webkit-keyframes pace-theme-mac-osx-motion {
        0% {
            -webkit-transform: none;
            transform: none;
        }

        100% {
            -webkit-transform: translate(-28px, 0);
            transform: translate(-28px, 0);
        }
    }

    @-moz-keyframes pace-theme-mac-osx-motion {
        0% {
            -moz-transform: none;
            transform: none;
        }

        100% {
            -moz-transform: translate(-28px, 0);
            transform: translate(-28px, 0);
        }
    }

    @-o-keyframes pace-theme-mac-osx-motion {
        0% {
            -o-transform: none;
            transform: none;
        }

        100% {
            -o-transform: translate(-28px, 0);
            transform: translate(-28px, 0);
        }
    }

    @-ms-keyframes pace-theme-mac-osx-motion {
        0% {
            -ms-transform: none;
            transform: none;
        }

        100% {
            -ms-transform: translate(-28px, 0);
            transform: translate(-28px, 0);
        }
    }

    @keyframes pace-theme-mac-osx-motion {
        0% {
            transform: none;
            transform: none;
        }

        100% {
            transform: translate(-28px, 0);
            transform: translate(-28px, 0);
        }
    }
}