/* Own CSS */

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

@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;
        }

        .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;
        }
    }
}