$primary-color: #F26C0D;

.spl-weather-preloader-wrapper {
    height: 500px;

    .spl-weather-preloader {
        position: absolute;
        margin-left: -55px;
        margin-top: -100px;
        height: 80px;
        width: 80px;
        left: 50%;
        top: 50%;

        // cloud .
        &-cloud {
            width: 60px;
            height: 60px;

            path {
                fill: transparent;
                stroke: $primary-color;
                stroke-width: 0.25;
            }
        }

        // sun .
        &-sun {
            position: absolute;
            left: 25px;
            top: 3px;
            width: 40px;
            height: 40px;

            animation-name: rotate;
            animation-duration: 16000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;

            path {
                stroke-width: 0.18;
                fill: $primary-color;
                stroke: $primary-color;
            }
        }

        // rain .
        &-rain {
            position: absolute;
            width: 70px;
            height: 70px;
            margin-top: -22px;
            margin-left: 3px;
        }

        &-drop {
            opacity: 1;
            background: $primary-color;
            display: block;
            float: left;
            width: 1px;
            height: 2px;
            margin-left: 4px;
            border-radius: 0px 0px 6px 6px;

            animation-name: drop;
            animation-duration: 1700ms;
            animation-iteration-count: infinite;

            &:nth-child(1) {
                animation-delay: -130ms;
            }

            &:nth-child(2) {
                animation-delay: -240ms;
            }

            &:nth-child(3) {
                animation-delay: -390ms;
            }

            &:nth-child(4) {
                animation-delay: -525ms;
            }

            &:nth-child(5) {
                animation-delay: -640ms;
            }

            &:nth-child(6) {
                animation-delay: -790ms;
            }

            &:nth-child(7) {
                animation-delay: -900ms;
            }

            &:nth-child(8) {
                animation-delay: -1050ms;
            }

            &:nth-child(9) {
                animation-delay: -1130ms;
            }

            &:nth-child(10) {
                animation-delay: -1300ms;
            }
        }
    }


    @keyframes rotate {
        0% {
            transform: rotateZ(0deg);
        }

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

    @keyframes drop {
        50% {
            height: 45px;
            opacity: 0;
        }

        51% {
            opacity: 0;
        }

        100% {
            height: 1px;
            opacity: 0;
        }
    }
}