div.loader-container {
    position: relative;

    div.loader-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        opacity: 0;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.5);
        transition: opacity ease 1s;

        div.loader-inner {
            background: rgba(255, 255, 255, 0.8);
            padding: 15px;
        }

        div.spinner-border {
            vertical-align: middle;
        }

        span.loader-text:not(:empty) {
            margin-left: 10px;
        }

    }
    &.page-loader {
        > div.loader-overlay {
            position: fixed;
            z-index: 1;

            div.loader-inner {
                background: $light;
                width: 100%;
                text-align: center;
                padding: 20px 15px;
            }
        }
    }

    &.small {
        div.loader-overlay div.loader-inner {
            padding: 5px;
        }
        div.spinner-border {
            width: 1rem;
            height: 1rem;
            border-width: 0.125rem;
        }
    }
}

div.progress-bar.reversed {
    &.progress-bar-striped {
        background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    }
    &.progress-bar-animated {
        animation-direction: reverse;
    }
}

body.has-modal div.loader-container.page-loader > div.loader-overlay {
    z-index: 2000;
}