@import 'colors';
$animation-speed: 1.4s !default;
$animation-delay: -0.16s !default;
$dots-diameter: 8px !default;
$dots-diameter-mini: 4px !default;

.hc-dots-container {
    height: 100%;
    width: 100%;
    position: relative;

    &.center-dots .hc-dots-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: $dots-diameter / -2;
        margin-left: $dots-diameter / -2;
    }
}

.hc-dots-loader {
    .loader-animate {
        background-color: $charcoal-blue;
        position: relative;
        animation: dots-loader $animation-speed ease-in-out infinite;
        animation-delay: $animation-delay;

        &,
        &:before,
        &:after {
            height: $dots-diameter;
            width: $dots-diameter;
            border-radius: 50%;
        }

        &:before {
            content: '';
            position: absolute;
            top: 0px;
            left: $dots-diameter * -2;
            animation: dots-loader $animation-speed ease-in-out infinite;
            animation-delay: $animation-delay * 2;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: $dots-diameter * 2;
            border-radius: 50%;
            animation: dots-loader $animation-speed ease-in-out infinite;
            animation-delay: 0s;
        }
    }

    &.loader-light .loader-animate {
        animation: dots-loader-light $animation-speed ease-in-out infinite;
        animation-delay: $animation-delay;

        &:before {
            animation: dots-loader-light $animation-speed ease-in-out infinite;
            animation-delay: $animation-delay * 2;
        }

        &:after {
            animation: dots-loader-light $animation-speed ease-in-out infinite;
            animation-delay: 0s;
        }
    }

    &.loader-mini .loader-animate {
        &,
        &:before,
        &:after {
            height: $dots-diameter-mini;
            width: $dots-diameter-mini;
        }
        &:before {
            left: $dots-diameter-mini * -2;
        }
        &:after {
            left: $dots-diameter-mini * 2;
        }
    }
}

@keyframes dots-loader {
    0%,
    80%,
    100% {
        background-color: transparentize($charcoal-blue, 0.8);
    }
    40% {
        background-color: $charcoal-blue;
    }
}

@keyframes dots-loader-light {
    0%,
    80%,
    100% {
        background-color: transparentize($white, 0.8);
    }
    40% {
        background-color: transparentize($white, 0.2);
    }
}