// @import "../core/core";

@mixin dc-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 901;
    pointer-events: none;
}

@mixin dc-loading-bar__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: $dc-gray70;
}

@mixin dc-loading-bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform-origin: left;
    background: $dc-orange50;
    animation: dc-loading-bar__fill 3s infinite cubic-bezier(.455, .03, .515, .955);
}

@mixin dc-loading-bar-animations {
    @keyframes dc-loading-bar__fill {
        0% {
            transform: scaleX(0);
        }

        100% {
            transform: scaleX(1);
        }
    }
}

@mixin dc-loading-bar-selectors {

    @include dc-loading-bar-animations;

    .dc-loading-bar {
        @include dc-loading-bar;

        &__bar {
            @include dc-loading-bar__bar;
        }

        &__fill {
            @include dc-loading-bar__fill;
        }
    }
}