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

    .ColorPicker-alphaSelectorWrapper {
        position: absolute;
        bottom: @controls-margin; right: 20px + (@controls-margin * 2);
        pointer-events: 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; }
        &: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-alphaSelection {
            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: 0; right: 1px; left: 1px;
            z-index: 20;
            pointer-events: none; }

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

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