// ---------------------------------------------------------------------------
//  Loader
// ---------------------------------------------------------------------------
    @import (reference) "color-picker.less";

    .ColorPicker-loader {
        background: rgba(0, 0, 0, .4);
        width: 100%; height: @picker-height--pointer;
        font-size: 0;
        text-align: center;
        pointer-events: none;
        position: absolute;
        top: 0;
        z-index: 40;
        opacity: 0;

        -webkit-transition: opacity .3s;

        .is--searching & { opacity: 1; }
        .is--error & { opacity: 0; }
    }

        .is--searching .ColorPicker-loaderDot {
            background: #fff;
            width: 14px; height: 14px;
            border-radius: 100%;
            margin: -7px 4px 0;
            position: relative;
            top: 50%;
            display: inline-block;

            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -webkit-animation: inflate alternate infinite .7s ease-in-out;
            -webkit-animation-fill-mode: both;
            -webkit-animation-play-state: running;

            &:nth-child(2) { -webkit-animation-delay: .1s; }
            &:nth-child(3) { -webkit-animation-delay: .2s; }
        }


        @-webkit-keyframes inflate {
            0%, 40% { -webkit-transform: scale(0); }
            100% { -webkit-transform: scale(1); }
        }
