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

    .ColorPicker-hueSelectorWrapper {
        position: absolute;
        bottom: @controls-margin; right: @controls-margin;
        pointer-events: none;

        &:after {
            content: '';
            border: 2px solid @color-ui;
            border-radius: 3px;
            box-shadow: inset 0 0 1px rgba(0, 0, 0, .5);
            position: absolute;
            top: -2px; right: -2px; bottom: -2px; left: -2px;
            z-index: 10; }
    }

    // -------------------------------------
    //  Current selection
    // -------------------------------------
        .ColorPicker-hueSelection {
            width: 18px; height: 7px;
            margin-top: -4px;
            border: 2px solid #fff;
            border-radius: 1px;
            box-shadow:
                0 0 1px rgba(0, 0, 0, .3),
                inset 0 0 1px rgba(0, 0, 0, .6);
            position: absolute;
            top: 1px; right: 1px; left: 1px;
            z-index: 20;
            pointer-events: none; }

    // -------------------------------------
    //  Selector bar
    // -------------------------------------
        .ColorPicker-hueSelector {
            width: 20px; height: @controls-height;
            display: block;
            cursor: -webkit-grab;
            pointer-events: all;

            &:active { cursor: -webkit-grabbing; }
        }
