@import "mixins";
@import "reset";
@import "theme";

@include keyframes(LOADERSPINNER) {
    0% {
        #{$browser}transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        #{$browser}transform: translate(-50%, -50%) rotate(360deg);
    }
}

@include keyframes(LOADERLABEL) {
    0% {
        opacity: 1.0;
        #{$browser}transform: translate(-50%, -50%) scale(1.0);
    }
    5% {
        opacity: 0.5;
        #{$browser}transform: translate(-50%, -50%) scale(0.5);
    }
    95% {
        opacity: 0.5;
        #{$browser}transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 1.0;
        #{$browser}transform: translate(-50%, -50%) scale(1.0);
    }
}

.loaderoverlay {
    $spinnerBoxSize: 200px;
    $themeColor: #6f3;

    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    color: $themeColor;

    %spinnerBox {
        border: 20px solid rgba(0, 0, 0, 0);
        border-top-color: $themeColor;
        border-bottom-color: $themeColor;
        border-radius: 1000px;
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .loaderspinner:before,
    .loaderspinner:after {
        content: "";
    }

    .loaderspinner {
        @include animation(LOADERSPINNER 5s linear infinite);

        width: $spinnerBoxSize;
        height: $spinnerBoxSize;

        @extend %spinnerBox;
    }

    .loaderspinner:before {
        @include animation(LOADERSPINNER 10s linear infinite);

        width: $spinnerBoxSize * 0.8;
        height: $spinnerBoxSize * 0.8;

        @extend %spinnerBox;
    }

    .loaderspinner:after {
        @include animation(LOADERSPINNER 5s linear infinite);

        width: $spinnerBoxSize * 0.6;
        height: $spinnerBoxSize * 0.6;

        @extend %spinnerBox;
    }

    .loaderlabel {
        @include animation(LOADERLABEL 5s linear infinite);

        text-transform: uppercase;
        font-family: sans-serif;
        font-size: $defaultFontSize * 1.375;
        font-weight: 700;
        letter-spacing: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
    }
}