/*
 * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
 *  
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"), 
 * to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
 * and/or sell copies of the Software, and to permit persons to whom the 
 * Software is furnished to do so, subject to the following conditions:
 *  
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *  
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
 * DEALINGS IN THE SOFTWARE.
 *
 *
 * Portions of this code are adapted from react-simple-colorpicker
 * https://github.com/WickyNilliams/react-simple-colorpicker
 * 
 * The MIT License (MIT)
 * 
 * Copyright (c) 2014 Nick Williams
 * Copyright (c) 2014 George Czabania
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

@slider-radius: 1.2rem;

.color-picker {
    // HACK: remove this before integration
    top: 0;
    font-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: @dialog-margin 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 @dialog-margin @dialog-margin @dialog-margin;
    color: @bg-alt;
    overflow-y: auto;
    input[type="text"] {
        font-size: @text-medium;
        color: @item-active;
        border-radius: 0;
        border: none;
        border-bottom: @hairline solid @underlines;
    }
    input[type="text"]:hover {
        color: @item-hover;
        border: none;
        border-bottom: @hairline solid @underlines;
    }
    input[type="text"]:focus {
        color: @item;
        background: none;
        border: none;
        border-bottom: @hairline solid @focus-highlight;
    }
    input[type="text"]::-webkit-input-placeholder {
       color: @item-inactive;
    }
    .column-1 {
        width: 0.8rem;
    }
}

.color-picker {
    left: 0rem;
    width: 30.2rem;
    height: 28.4rem;
    max-height: 36rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: visible;
    &:before {
        .dialog-pointer(1.6rem, true);
    }

    &:after {
        .dialog-pointer(1.6rem, false);
    }
    
    &.hide-top-pointer:before {
        display: none;
    }

    &.hide-bottom-pointer:after {
        display: none
    }
}

.color-picker .drop-down {
  font-size: @text-small;
  outline: none;
  width: 7rem;
}

.color-picker .drop-down input {
  color: @bg-alt;
  font-size: @text-small;
}

.color-picker__stats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.color-picker__format {
    height: 2.4rem;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    font-size: @text-wee;
}

.color-picker__format .label__medium {
    justify-content: flex-start;
}

.color-picker-map {
    position: absolute;
    top: 6.8rem;
    left: 6.8rem;
    height: 14.6rem;
    width: 13.8rem;
    -webkit-user-select: none;

    &.color-picker-map__dark .color-picker-map__pointer {
        border-color: @item-active;
    }

    &.color-picker-map__light .color-picker-map__pointer {
        border-color: @black;
    }

    .color-picker-map__pointer {
        position: absolute;
        margin-left: -1rem;
        margin-bottom: -1rem;
        
        width: 2rem;
        height: 2rem;
        
        background: none;
        border-radius: 100%;
        border: .2rem solid @black;
        box-shadow: 0 0 0 .2rem rgba(0,0,0,.12),0 0 0.4rem rgba(0,0,0,.12) inset;
    }

    .color-picker-map__background {
        position: absolute;
        height: 17rem;
        width: 16.2rem;
        top: -1.2rem;
        left: -1.2rem;
        border-radius: @slider-radius;
    }

    .color-picker-map__background:before,
    .color-picker-map__background:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        height: 17rem;
        width: 16.2rem;
        border-radius: @slider-radius;
        box-shadow:0 0 0 @hairline @bg-border;
    }

    .color-picker-map__background:after {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,1) 95%);
    }

    .color-picker-map__background:before {
        background: linear-gradient(to right, rgba(255,255,255,1) 5%,rgba(255,255,255,0) 95%);
    }
}

// Color Inputs for RGB and HSB

.color-picker__rgbhsb {
    position: absolute;
    right: 0;
    top: 5rem;
    width: 7rem;
    height: auto;
    .formline {
        width: 7rem;
        height: 2.8rem;
        padding: 0 .2rem;
        &:nth-child(3){
            margin-bottom: 1rem;
        }
    }
    label {
        font-size: @text-medium;
        display: inline-block;
        width: 1rem;
        text-align: right;
        margin-right:1rem;
    }
    input[type="text"] {
        font-size: @text-medium;
        display: inline-block;
        width: 3.2rem;
    }
    .column-1{
        height: 1.2rem;
    }
}

// Color Swatches Defaults for Color, No-Color, Gradient, Fill etc

.color-picker__colortype {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    width: 28.2rem;
    height: 2.4rem;
    
    input{
        vertical-align: top;
        height: 2.4rem;
        width: 16.2rem;
    }
    
    .color-picker__colortype__thumb {
        display: inline-block;
        width: 2.4rem;
        height: 2.4rem;
        background: @item;
        border-radius: 0.2rem;
        .background-checkerboard(24);
        &.empty {
            background: url("img/ico-color-picker-no-color.svg") no-repeat;
        }
    }
    
    .column-1{
        display: inline-block;
    }
    
    .number-input__clean.column-11.number-input,
    .number-input__dirty.column-11.number-input {
        font-size: 1.4rem;
        line-height: 1.4rem;
        width: 20rem;
        flex-basis: 12rem;
        vertical-align: top;
    }
}

.color-picker__colortype__thumb__overlay {
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.1rem @bg-border;;
}

// Color Sliders

.color-picker-slider {
    position: absolute;
    -webkit-user-select: none;
    -webkit-backface-visibility: hidden;

    &.color-picker-slider__vertical {
        top: 1.4rem;
        width: 2.4rem;
        height: 14.6rem;
        
        .color-picker-slider__track,
        .color-picker-slider__track-overlay {
            position: absolute;
            top: -1.4rem;
            bottom: 0;
            left: 0;
            width: 2.4rem;
            height: 17rem;
            margin-left: 0;
        }
        .color-picker-slider__pointer {
            bottom: 50%;
            left: .2rem;
            margin-bottom: -0.8rem
        }
    }

    &.color-picker-slider__horizontal {
        left: 1rem;
        right: 0;
        height: 2.4rem;
        width: 17.8rem;
        
        .color-picker-slider__track,
        .color-picker-slider__track-overlay {
            position: absolute;
            left: -1rem;
            right: 0;
            top: 0;
            height: 2.4rem;
            width: 20.2rem;
            margin-top: 0rem;
        }
        .color-picker-slider__pointer {
            top: .2rem;
            left: 50%;
            margin-left: -0.8rem;
        }
    }

    .color-picker-slider__track,
    .color-picker-slider__track-overlay {    
        border-radius: @slider-radius;
        box-shadow:0 0 0 @hairline @bg-border;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            z-index: -1;
            border-radius: @slider-radius;
        }
    }

    .color-picker-slider__pointer {
        position: absolute;
        width: 2rem;
        height: 2rem;
        background: none;
        margin: 0;
        border-radius: 100%;
        border: (@hairline * 2) solid @item;
        box-shadow: 0 0 0 .2rem  rgba(0,0,0,.12), 0 0 0.4rem rgba(0,0,0,.12) inset;
    }
}

// Label for Color picker opacity slider 
.color-picker .slider_label {
    position: absolute;
    top: 24.3rem;
    right: 0;
    width: 7rem;
    display: flex;
    padding: 0 .2rem;
    label {
        font-size: @text-medium;
        display: inline-block;
        vertical-align: baseline;
        line-height: 1.8rem;
        text-align: right;
        width: 1rem;
    }
    input[type='text'] {
        font-size: @text-medium;
        width: 3.2rem;
        display: inline-block;
    }
}

.color-picker-slider__disabled {
    .color-picker-slider__pointer {
        background: darken(whitesmoke, 20%);
    }
}

.color-picker__hue-slider {
    position: absolute;
    top: 5.6rem;
    bottom: 0;
    left: 1.6rem;
    width: 1.6rem;
    transform: rotate(0deg);

    .color-picker-slider__horizontal > .color-picker-slider__track {
        background: linear-gradient(to bottom,
            #FF0000 5%,
            #FF0099 14%,
            #CD00FF 23%,
            #3200FF 32%,
            #0066FF 41%,
            #00FFFD 50%,
            #00FF66 59%,
            #35FF00 68%,
            #CDFF00 77%,
            #FF9900 86%,
            #FF0000 95%
        );
    }

    .color-picker-slider__vertical > .color-picker-slider__track {
        background: linear-gradient(to bottom,
            #FF0000 5%,
            #FF0099 14%,
            #CD00FF 23%,
            #3200FF 32%,
            #0066FF 41%,
            #00FFFD 50%,
            #00FF66 59%,
            #35FF00 68%,
            #CDFF00 77%,
            #FF9900 86%,
            #FF0000 95%
        );
    }
}

.color-picker__transparency-slider {
    position: absolute;
    left: 1.6rem;
    right: 1.6rem;
    top: 24.2rem;
    height: 2.4rem;
    width: 20.2rem;
    border-radius: calc(@slider-radius + 0.2rem);
    .color-picker-slider__horizontal > .color-picker-slider__track,
    .color-picker-slider__vertical > .color-picker-slider__track {
        .background-checkerboard(16);
        box-shadow: 0 0 .2rem @bg-border;
    }
}
