@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$c-thinking-loader__dot--time-between-starts: 0.25s;
$c-thinking-loader__dot--starting-scale: 0.5;
$c-thinking-loader--color--main: $grey-dark !default;
$c-thinking-loader--color--secondary: $grey-middle !default;

.c-thinking-loader {}

    @keyframes growAnimation {
        0%, 80%, 100% {
            transform: scale($c-thinking-loader__dot--starting-scale);
            background: $c-thinking-loader--color--secondary;
        }
        20% {
            transform: scale(1);
            background: $c-thinking-loader--color--main;
        }
    }

    .c-thinking-loader__dot {
        display: inline-block;
        $c-thinking-loader__dot--size: 8px;
        width: $c-thinking-loader__dot--size;
        height: $c-thinking-loader__dot--size;
        background: $c-thinking-loader--color--secondary;
        transform: scale($c-thinking-loader__dot--starting-scale);
        border-radius: 50%;
        animation-name: growAnimation;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

        .c-thinking-loader__dot--1 {
            animation-delay: $c-thinking-loader__dot--time-between-starts * 0;
        }

        .c-thinking-loader__dot--2 {
            animation-delay: $c-thinking-loader__dot--time-between-starts * 1;
        }

        .c-thinking-loader__dot--3 {
            animation-delay: $c-thinking-loader__dot--time-between-starts * 2;
        }

        .c-thinking-loader__dot--4 {
            animation-delay: $c-thinking-loader__dot--time-between-starts * 3;
        }