/*
    [sberkov]
    Note! pre-bootstrap styles should be removed once main style is loaded.

    [dberlin] Angular does't support relative paths for relative assets (desktop/mobile) on build phase,
    that's why that file imported as asset too, make sure it will not be resolved as inline with "inlineCritical" = true
*/
body.wpfe-pre-bootstrap {
    background-color: rgb(25, 25, 27);
    color: rgb(200, 200, 200);
}

.wpfe-pre-bootstrap-error {
    color: rgb(200, 200, 200);
}

.wpfe-pre-bootstrap .wpfe-pre-bootstrap-loading-spinner-container {
    position: absolute;
    left: calc(50% - 17px);
    top: calc(50% - 17px);
    z-index: 0;
    width: 34px;
    height: 34px;
    background-color: rgb(200, 200, 200);
    -webkit-mask: url("spinner.svg") no-repeat center / contain;
    mask: url("spinner.svg") no-repeat center / contain;
    -webkit-animation: icon-rotate 1s infinite steps(8);
    animation: icon-rotate 1s infinite steps(8);
}

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

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

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

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

/*must be in sync with app.component.scss wpfe-app-loading-image*/
.wpfe-pre-bootstrap .wpfe-pre-bootstrap-loading-image {
    background-image: url("brand/loading-image");
    width: 100%;
    height: calc(50% - 50px);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
}