/* The actual pop window with the color picker components */
.#{$prefix}colorpicker {

    // needed for overflow: visible for color map & slider draggers
    // to "break out" of their drag boundaries
    overflow: visible;

    >.#{$prefix}box-inner {
        overflow: visible;
    }

    .#{$prefix}field.#{$prefix}label-text-align-left >.#{$prefix}label-el {
        text-align: center;
    }

    .#{$prefix}body-el {
        overflow: visible
    }

    .#{$prefix}colorpicker-escape-overflow {
        overflow: visible;
    }

    .#{$prefix}colorpicker-slider {
        overflow: visible;
    }
    .#{$prefix}button {
        &.#{$prefix}has-text .#{$prefix}inner-el {
            padding: 8px 0;
            text-align: center;
        }
    }

    // Hiding * from input field label
    .#{$prefix}textfield > .#{$prefix}label-el:after {
        display: none;
    }
}

// Hiding S, V and preview column on Phone 
.#{$prefix}phone {
    &.#{$prefix}portrait {
        .#{$prefix}colorpicker-column-sslider,
        .#{$prefix}colorpicker-column-vslider,
        .#{$prefix}colorpicker-column-preview {
            display: none;
        }
    }

    &.#{$prefix}landscape {
        .#{$prefix}colorpicker {
            max-height: 90vh;
        }
    }

    .#{$prefix}colorpicker-escape-overflow .#{$prefix}input-el {
        padding-left: 2px;
        padding-right: 2px;
    }
}

// main color map for shade selection with draggable circle
.#{$prefix}colorpicker-colormap {
    // This background image is not really visually presented but we put it here
    // so that we can pass through the resource URL to our JavaScript side.
    background-image: theme-background-image('colorpick/map_gradient','png');
}

// circle for dragging
.#{$prefix}colorpicker-colormap-draghandle-container {
    overflow : visible;
    z-index  : 1;
}

// transparent PNG for shades blending
.#{$prefix}colorpicker-colormap-blender {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
}

.#{$prefix}colorpicker-colormap-draghandle {
    width      : 15px;
    height     : 15px;
    position   : relative;
    left       : -7px;
    top        : -7px;
    background-image : theme-background-image('colorpick/drag_circle', 'png');
}

// 4 sliders

.#{$prefix}colorpicker-draghandle-container {
    width: 20px;
    overflow: visible;
    .#{$prefix}autocontainer-outerCt {
        height: 100%;
    }
}

.#{$prefix}colorpicker-draghandle {
    width             : 32px;
    height            : 9px;
    position          : relative;
    left              : -6px;
    top               : -4px;
    background-image  : theme-background-image('colorpick/pickerslider','png');
    background-repeat : no-repeat;
    z-index           : 1;
}

.#{$prefix}colorpicker-hue {
    // This background image is not really visually presented but we put it here
    // so that we can pass through the resource URL to our JavaScript side.
    background-image: theme-background-image('colorpick/huegradient','png');
}

// the stretched gradient <img>
.#{$prefix}colorpicker-hue-gradient {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.#{$prefix}colorpicker-saturation {
    .#{$prefix}colorpicker-draghandle-container {
        background : -moz-linear-gradient(top, #ffffff 0%, #000000 100%); /* FF3.6+ */
        background : -webkit-linear-gradient(top, #ffffff 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
        background : -o-linear-gradient(top, #ffffff 0%,#000000 100%); /* Opera 11.10+ */
        background : -ms-linear-gradient(top, #ffffff 0%,#000000 100%); /* IE10+ */
        background : linear-gradient(to bottom, #ffffff 0%,#000000 100%); /* W3C */
        filter     : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    }
}

.#{$prefix}colorpicker-value {
    .#{$prefix}colorpicker-draghandle-container {
        background : -moz-linear-gradient(top, #ff0000 0%, #000000 100%); /* FF3.6+ */
        background : -webkit-linear-gradient(top, #ff0000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
        background : -o-linear-gradient(top, #ff0000 0%,#000000 100%); /* Opera 11.10+ */
        background : -ms-linear-gradient(top, #ff0000 0%,#000000 100%); /* IE10+ */
        background : linear-gradient(to bottom, #ff0000 0%,#000000 100%); /* W3C */
        filter     : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    }
}

.#{$prefix}colorpicker-alpha {
    .#{$prefix}colorpicker-draghandle-container {
        background-image: theme-background-image('colorpick/checkerboard', 'png');
    }
}

// Preview on the right top
.#{$prefix}colorpicker-preview {
    background-image: theme-background-image('colorpick/checkerboard', 'png');
}

.#{$prefix}colorpreview {
    position: relative;
    
    .#{$prefix}colorpreview-filter-el {
        height:100%;
        position: absolute;
        width:100%;
    }
    
    .#{$prefix}colorpreview-btn-el {
        height:100%;
        position: absolute;
        width:100%;
    }
    
}