@import '../../../styles/definitions/colors';

// Local Variables
$preloader-size: 60px;
$preloader-overlay-bgcolor: rgba($white, 0.4);
$dot-size: 6px;
$dot-bgcolor: $black;
$dot-animation-duration: 1.2s;

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

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

// Component Styles
.preloader {
    &_overlay {
        position: absolute;
    	top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3000;
        transition: opacity var(--animtime, 1000ms) ease;
        background-color: $preloader-overlay-bgcolor;

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

    &_spinner {
        position: relative;
        display: block;
        width: $preloader-size;
        height: $preloader-size;
        opacity: 0.5;
    }

    &_dot {
        animation: lds-roller $dot-animation-duration cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: $preloader-size / 2 $preloader-size / 2;

        &:after {
            content: "";
            display: block;
            position: absolute;
            width: $dot-size;
            height: $dot-size;
            border-radius: 50%;
            background-color: $dot-bgcolor;
            transform: translate(-50%);
        }

        &: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);
            }
        }
    }
}
