/* Own CSS */
@import "config.less";

/* @selector-size should be an odd number, in order to pixel-perfectly center on a given colour */
@colorpicker-selector-size: 72 * @unit_base;
@colorpicker-selector-border-width: 5 * @unit_base;
@colorpicker-clrchannel-hs-width:  256 * @unit_base;
@colorpicker-clrchannel-hs-height: 256 * @unit_base;
@colorpicker-clrchannel-l-width: 18 * @unit_base;
@colorpicker-clrchannel-l-height: 256 * @unit_base;

@colorpicker-selector-total-size: @colorpicker-selector-size + 2 * @colorpicker-selector-border-width;
@colorpicker-clrchannel-hs-padding: @colorpicker-selector-total-size / 2;
@colorpicker-clrchannel-l-hpadding:
    ~`Math.max(0,
          parseInt("@{colorpicker-selector-total-size}") - 
          parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
@colorpicker-clrchannel-l-selector-left:
    ~`Math.max(0, 
          parseInt("@{colorpicker-clrchannel-l-width}") -
          parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;

.ui-colorpicker {
    display: table;

    .colorpicker-hs-container {
        position: relative;
        display: table-cell;
        float: left;

        width:  @colorpicker-clrchannel-hs-width;
        height: @colorpicker-clrchannel-hs-height;
        padding: @colorpicker-clrchannel-hs-padding;

        .colorpicker-hs-mask {
            position: absolute;
            width:  @colorpicker-clrchannel-hs-width;
            height: @colorpicker-clrchannel-hs-height;
        }

        .colorpicker-hs-selector {
            position: absolute;
            width:  @colorpicker-selector-size;
            height: @colorpicker-selector-size;
            border: @colorpicker-selector-border-width solid black;
        }
    }

    .colorpicker-l-container {
        position: relative;
        float: left;

        width:  @colorpicker-clrchannel-l-width;
        height: @colorpicker-clrchannel-l-height;
        padding-left:   @colorpicker-clrchannel-l-hpadding;
        padding-right:  @colorpicker-clrchannel-l-hpadding;
        padding-top:    @colorpicker-clrchannel-hs-padding;
        padding-bottom: @colorpicker-clrchannel-hs-padding;

        .colorpicker-l-mask {
            position: absolute;
            width:  @colorpicker-clrchannel-l-width;
            height: @colorpicker-clrchannel-l-height;
            left: ( @colorpicker-selector-size + ( @colorpicker-selector-border-width * 2 ) - @colorpicker-clrchannel-l-width ) / 2;
        }

        .colorpicker-l-selector {
            left: @colorpicker-clrchannel-l-selector-left;
            position: absolute;
            width:  @colorpicker-selector-size;
            height: @colorpicker-selector-size;
            border: @colorpicker-selector-border-width solid black;
        }
    }
}

.ui-colorpicker .colorpicker-hs-container .sat-gradient {
    background: none; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,rgba(128,128,128,0)), 
        color-stop(100%,rgba(128,128,128,1))); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top, 
        rgba(128,128,128,0) 0%, 
        rgba(128,128,128,1) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, 
        rgba(128,128,128,0) 0%,
        rgba(128,128,128,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, 
        rgba(128,128,128,0) 0%,
        rgba(128,128,128,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, 
        rgba(128,128,128,0) 0%,
        rgba(128,128,128,1) 100%); /* IE10+ */
    background: linear-gradient(top, 
        rgba(128,128,128,0) 0%,
        rgba(128,128,128,1) 100%); /* W3C */
    /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00808080', endColorstr="#808080", GradientType = 0); */
}

.ui-colorpicker .colorpicker-l-container .l-gradient {
    background: none; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,rgba(0,0,0,1)),
        color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,
        rgba(0,0,0,1) 0%, 
        rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, 
        rgba(0,0,0,1) 0%,
        rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, 
        rgba(0,0,0,1) 0%,
        rgba(255,255,255,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, 
        rgba(0,0,0,1) 0%,
        rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(top, 
        rgba(0,0,0,1) 0%,
        rgba(255,255,255,1) 100%); /* W3C */
    /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000', endColorstr="#ffffff", GradientType = 0); */
}