.page-preloader {
	background-color: $color-white;
	width: 100%;
    height: 100vh;
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
    opacity: 1;
    visibility: visible;

    @include transition;
    @include flex;
    @include align-items(center);
    @include flex-just(center);

	.loader {
		width: 6px;
		height: 6px;
		position: absolute;
		left: 50%;
		top: 50%;
		animation: typing 1s linear infinite alternate;

        @include border-radius(50%);
	}

	&.hidden {
		opacity: 0;
		visibility: hidden;
	}

    &.hide {
        display: none;
    }

    &.percentage-preloader {

        .sk-percentage {
            height: 100%;
            width: 0;
            background-color: #fceef1;
            left: 0;
            position: fixed;

            &-percent {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-size: 6em;
                font-weight: 600;
                letter-spacing: -.02rem;
            }
        }
    }
}

// Classic spinner

.spinner {
    animation: spinner_animation 2s linear infinite;
    z-index: 2;
    position: relative;

    .path {
        opacity: .75;
        stroke: $color-black-light;
        stroke-linecap: round;
        animation: spinner_animation_dash 1.5s ease-in-out infinite;
    }
}

@keyframes spinner_animation {

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

@keyframes spinner_animation_dash {

    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

// Circle spinner

.sk-circle {
    $circleCount: 12;
    $animationDuration: 1.2s;
    position: relative;

    .sk-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .sk-child {

        &::before {
            content: "";
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: $color-black-light;
            animation: sk-circleBounceDelay $animationDuration infinite ease-in-out both;

            @include border-radius(50%);
        }
    }

    @for $i from 2 through $circleCount {

        .sk-circle#{$i} { 
            transform: rotate(360deg / $circleCount * ($i - 1));

            &::before {
                animation-delay: - $animationDuration + $animationDuration / $circleCount * ($i - 1);
            }
        }
    }
}

@keyframes sk-circleBounceDelay {

    0%, 80%, 100% { 
        transform: scale(0);
    }

    40% { 
        transform: scale(1.0);
    }
}

// Waves loader

.sk-wave {
    $rectCount: 5;
    $animationDuration: 1.2s;
    $delayRange: 0.4s;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;

    .sk-rect {
        background-color: $color-black-light;
        height: 100%;
        width: 5px;
        display: inline-block;
        animation: sk-waveStretchDelay $animationDuration infinite ease-in-out;
    }

    @for $i from 1 through $rectCount {

        .sk-rect#{$i} { 
            animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * ($i - 1); 
        }
    }
}

@keyframes sk-waveStretchDelay {

    0%, 40%, 100% { 
        transform: scaleY(0.4);
    }

    20% { 
        transform: scaleY(1.0);
    }
}

// Double bounce loader

.sk-double-bounce {
    position: relative;

    .sk-child {
        width: 100%;
        height: 100%;
        background-color: $color-black-light;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        animation: sk-doubleBounce 2.0s infinite ease-in-out;

        @include border-radius(50%);
    }

    .sk-double-bounce2 {
        animation-delay: -1.0s;
    }
}

@keyframes sk-doubleBounce {

    0%, 100% { 
        transform: scale(0);
    }

    50% { 
        transform: scale(1.0);
    }
}

// Folding Cube loader

.sk-folding-cube {
    $cubeCount: 4;
    $animationDuration: 2.5s;
    $delayRange: $animationDuration/2;
    position: relative;
    transform: rotateZ(45deg);

    .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        transform: scale(1.1);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: $color-black-light;
            animation: sk-foldCubeAngle $animationDuration infinite linear both;
            transform-origin: 100% 100%;
        }
    }

    @for $i from 2 through $cubeCount {

        .sk-cube#{$i} {
            transform: scale(1.1) rotateZ(90deg * ($i - 1));

            &::before {
                animation-delay: $delayRange / $cubeCount * ($i - 1);
            }
        }
    }
}

@keyframes sk-foldCubeAngle {

    0%, 10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 

    25%, 75% {
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    } 

    90%, 100% {
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

.spinner,
.sk-fading-circle,
.sk-double-bounce,
.sk-circle,
.sk-folding-cube {
    width: 3.25rem;
    height: 3.25rem;
}