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

    .ColorPicker-color {
        width: 100%; height: @picker-height--pointer;
        cursor: pointer;
        text-align: center;
        border-radius: 2px 2px 0 0;
        position: absolute;
        top: 0;

        &:before {
            content: '';
            background: @image-transparency;
            background-size: 10px 10px;
            width: 100%; height: 100%;
            position: absolute;
            top: 0; right: 0; left: 0;
            z-index: -1;
            opacity: .1; }
        &:after {
            content: '';
            width: 0; height: 0;
            margin: auto;
            border: 8px solid transparent;
            border-bottom-color: inherit;
            position: absolute;
            top: -16px; left: 0; right: 0; }

        .no--arrow &:after { display: none; }
        .is--pointer & { border-radius: 2px; }
        .is--searching &:after { display: none; }
    }

        .ColorPicker-value,
        .ColorPicker-initial {
            font-family: 'Source Code Pro', @font-family;
            color: #fff;
            text-align: center;
            text-shadow:
                0 2px 30px rgba(0, 0, 0, .5),
                0 0 2px rgba(0, 0, 0, .3),
                0 1px 1px rgba(0, 0, 0, .1),
                0 1px rgba(0, 0, 0, .1),
                0 -1px 4px rgba(0, 0, 0, .1),
                0 0 1px rgba(0, 0, 0, .3); }

        // -------------------------------------
        //  Current color
        // -------------------------------------
            .ColorPicker-value {
                font-size: 17px;
                font-weight: 400;
                position: absolute;
                top: 50%; right: 0; left: 0;
                pointer-events: none;

                -webkit-transition: -webkit-transform .3s;
                -webkit-transform: translate(0, -105%);

                -webkit-backface-visibility: hidden;
                -webkit-transform-style: preserve-3d;

                .is--color_hsla & { font-size: 15px; }

                .ColorPicker-color:hover & { -webkit-transform: translate(0, -140%); }

                .is--initial & { -webkit-transform: translate(0, -50%); }
                .is--initial .ColorPicker-color:hover & { -webkit-transform: translate(0, -90%); }
                .is--pointer & { -webkit-transform: translate(0, -90%); }
                .is--pointer .ColorPicker-color:hover & { -webkit-transform: translate(0, -95%) scale(1.1); }

                .is--error &,
                .is--error .ColorPicker-color:hover & { -webkit-transform: translate(0, -50%); }

                .is--pointer &:after {
                    content: attr(data-variable);
                    font-size: 11px;
                    color: #fff;
                    text-overflow: ellipsis;
                    text-shadow: 0 0 1px #000;
                    white-space: nowrap;
                    margin: auto;
                    overflow: hidden;
                    position: absolute;
                    top: 30px; right: 5px; left: 5px; }

                .is--searching & { display: none; }

                .is--error &:after {
                    content: 'No color found :(';
                    font-size: 11px;
                    color: #000;
                    text-shadow: none;
                    margin: auto;
                    overflow: hidden;
                    top: -5px; right: 5px; left: 5px; }
            }

        // -------------------------------------
        //  Initial color
        // -------------------------------------
            .ColorPicker-initialWrapper {
                background: #fff;
                width: 100%;
                cursor: pointer;
                position: absolute;
                top: @picker-height--pointer - 30;

                -webkit-backface-visibility: hidden;
                -webkit-transition: -webkit-transform .3s;
                -webkit-transform: translate3d(0, 0, 0);

                &:hover { -webkit-transform: translate(0, -20%); }

                .is--initial & {
                    pointer-events: none;
                    -webkit-transform: translate(0, 100%); }

                .is--pointer & { display: none; }

                &:before {
                    content: '';
                    background: @image-transparency;
                    background-size: 10px 10px;
                    width: 100%; height: 100%;
                    position: absolute;
                    top: 0; right: 0; left: 0;
                    z-index: -1;
                    opacity: .1; }
            }

                .ColorPicker-initial {
                    font-weight: 300;
                    padding: 6px 0 20px;
                    pointer-events: none; }
