// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
    @import "ui-variables";

// ---------------------------------------------------------------------------
//  Color picker: style
// ---------------------------------------------------------------------------
    @color-ui: #ebebeb;

    @picker-width: 260px;
    @picker-height: 300px;
    @picker-height--pointer: 100px;

    @controls-height: 180px;
    @controls-margin: 10px;

    @image-transparency: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJElEQVQIW2PcvXv3fwYg6OzsBFEMjBgCLi4uYBXl5eUQFegCAIYVD/syLxKnAAAAAElFTkSuQmCC);

    .ColorPicker {
        background: #fff;
        width: @picker-width; height: @picker-height;
        border-radius: 3px 3px 2px 2px;
        box-shadow: 0 10px 30px 10px rgba(0, 0, 0, .3);
        position: absolute;
        top: 50%; bottom: 0;
        z-index: 40;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;

        -webkit-transform-origin: 50% 0;
        -webkit-transition:
            -webkit-transform   .15s,
            opacity             .15s,
            visibility        0 .15s;
        -webkit-transform: scale(.6);

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

        &.is--visible {
            visibility: visible;
            opacity: 1;
            pointer-events: all;

            -webkit-transition:
                -webkit-transform .2s,
                opacity           .2s;
            -webkit-transform: scale(1); }

        &.is--pointer { height: @picker-height--pointer; }
    }

    // -------------------------------------
    //  Picker
    // -------------------------------------
        .ColorPicker-picker {
            background: @color-ui;
            width: 100%; height: @controls-height + (@controls-margin * 2);
            box-shadow: 0 -1px rgba(0, 0, 0, .2);
            position: absolute;
            bottom: 0;
            z-index: 1;
            border-radius: 0 0 3px 3px;

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