$size: 60px;
$half: $size / 2;
$dot-size: 6px;

@mixin getPosition($top, $left) {
    top: ($top / 80) * $size;
    left: ($left / 80) * $size;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.preloader {
    &_overlay {
        position: fixed;
    	top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
        z-index: 3000;
        transition: opacity var(--animtime, 1000ms) ease;
        background: rgba(255, 255, 255, 0.4);

        &.appear,
        &.enter {
            opacity: 0;
        }
        &.appear-active,
        &.enter-active {
            opacity: 1;
        }
        &.exit {
            opacity: 1;
        }
        &.exit-active {
            opacity: 0;
        }
    }

    &_spinner {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -$half 0 0 -$half;
        width: $size;
        height: $size;
        opacity: 0.5;
    }

    &_dot {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: $half $half;

        &:after {
            content: "";
            display: block;
            position: absolute;
            width: $dot-size;
            height: $dot-size;
            border-radius: 50%;
            background: black;
            margin: -$dot-size/2 0 0 -$dot-size/2;
        }

        &:nth-child(1) {
            animation-delay: -0.036s;

            &:after {
                @include getPosition(63, 63);
            }
        }
        &:nth-child(2) {
            animation-delay: -0.072s;

            &:after {
                @include getPosition(68, 56);
            }
        }
        &:nth-child(3) {
            animation-delay: -0.108s;

            &:after {
                @include getPosition(71, 48);
            }
        }
        &:nth-child(4) {
            animation-delay: -0.144s;

            &:after {
                @include getPosition(72, 40);
            }
        }
        &:nth-child(5) {
            animation-delay: -0.18s;

            &:after {
                @include getPosition(71, 32);
            }
        }
        &:nth-child(6) {
            animation-delay: -0.216s;
            
            &:after {
                @include getPosition(68, 24);
            }
        }
    }
}
