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

    .ColorPicker-saturationSelectorWrapper {
        position: absolute;
        bottom: @controls-margin; left: @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-saturationSelection {
            width: 10px; height: 10px;
            margin: -5px 0 0 -5px;
            border: 2px solid #fff;
            border-radius: 100%;
            box-shadow:
                0 0 1px rgba(0, 0, 0, .3),
                inset 0 0 1px rgba(0, 0, 0, .8);
            position: absolute;
            top: 100%; left: 0;
            z-index: 20;
            pointer-events: none; }

    // -------------------------------------
    //  Selector area
    // -------------------------------------
        .ColorPicker-saturationSelector {
            width: @controls-height; height: @controls-height;
            cursor: crosshair;
            display: block;
            pointer-events: all; }
