@require('./variables.styl')

.k-colorpicker
    display inline-block
    vertical-align middle
    .k-color
        height $colorpicker-height 
        width $colorpicker-width 
        border $colorpicker-border 
        cursor $colorpicker-cursor 
        border-radius $colorpicker-border-radius 
        background $colorpicker-bg-color 
        padding $colorpicker-padding 
        .k-inner
            border-radius $colorpicker-inner-border-radius 
            height 100%
    // size
    for size in large small mini
        &.k-{size}
            .k-color
                height lookup('$colorpicker-' + size + '-height')
                width lookup('$colorpicker-' + size + '-width')
                if lookup('$colorpicker-' + size + '-padding')
                    padding lookup('$colorpicker-' + size + '-padding')
    // disabled
    &.k-disabled
        .k-color
            background $colorpicker-disabled-bg-color
            border-color $colorpicker-disabled-border-color
            cursor $colorpicker-disabled-cursor 

.k-colorpicker-content
    padding $colorpicker-panel-padding 
.k-color-panel
    width $colorpicker-panel-width 
    .k-saturation
        height $colorpicker-panel-saturation-height 
        position relative
        overflow hidden
        user-select none
        .k-white
        .k-black
            position absolute
            width 100%
            height 100%
        .k-white
            background linear-gradient(90deg, #fff, rgba(255, 255, 255, 0))
        .k-black
            background linear-gradient(0, #000, rgba(0, 0, 0, 0))
        .k-pointer
            position absolute
        .k-circle
            width $colorpicker-panel-circle-width
            height @width 
            box-shadow $colorpicker-panel-circle-box-shadow 
            border-radius 50%
            transform translate(-(@width / 2), -(@width / 2))
    .k-controls
        display flex
    .k-sliders
        flex 1
    .k-slider
        display block
        margin-top $colorpicker-panel-item-gutter 
        .k-slider-wrapper
            .k-bar
                background transparent
            .k-wrapper
                height $colorpicker-panel-slider-height 
                border-radius $colorpicker-panel-slider-border-radius 
                margin $colorpicker-panel-slider-wrapper-margin 
                background transparent
            .k-handle-wrapper
                margin-top -($colorpicker-panel-handle-height / 2)
                margin-left -($colorpicker-panel-handle-width / 2)
            .k-bar-wrapper
                cursor $colorpicker-panel-slider-cursor 
                padding $colorpicker-panel-slider-padding 
            .k-handle
                height $colorpicker-panel-handle-height 
                width $colorpicker-panel-handle-width
                border $colorpicker-panel-handle-border 
                border-radius $colorpicker-panel-handle-border-radius 
                box-shadow $colorpicker-panel-handle-box-shadow 
                &:focus
                &:hover
                    transform $colorpicker-panel-handle-hover-transform 
                    cursor $colorpicker-panel-handle-hover-cursor 
                    background-color $colorpicker-panel-handle-hover-bg-color 
        &.k-hue
            .k-slider-wrapper
                background linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
        &.k-alpha
            .k-slider-wrapper
                background-size contain
                .k-bar-wrapper
                    background linear-gradient(to right, rgba(54, 48, 55, 0) 0%, rgb(54, 48, 55) 100%)
    .k-slider.k-alpha .k-slider-wrapper
    .k-alpha-bg
        background-image url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC")
    .k-color-wrapper
        width $colorpicker-panel-color-width 
        height $colorpicker-panel-color-height 
        border-radius $colorpicker-panel-color-border-radius 
        margin $colorpicker-panel-item-gutter 0 $colorpicker-panel-item-gutter $colorpicker-panel-item-gutter
        overflow hidden
        .k-color
            height 100%
            box-shadow $colorpicker-panel-color-box-shadow 
    .k-row
        margin-top $colorpicker-panel-item-gutter 
        .k-inner
            height $colorpicker-panel-input-height 
            line-height @height 
            padding $colorpicker-panel-input-padding 
            font-size $colorpicker-panel-font-size
        .k-text
            text-align $colorpicker-panel-text-align 
            font-size $colorpicker-panel-text-font-size 
            padding-top $colorpicker-panel-text-padding 
        .k-drag
            cursor ew-resize
            user-select none
    .k-presets
        border-top $colorpicker-panel-presets-border-top 
        margin $colorpicker-panel-presets-margin 
        overflow hidden
        .k-color
            margin $colorpicker-panel-presets-color-margin 
            border-radius $colorpicker-panel-presets-color-border-radius 
            float $colorpicker-panel-presets-color-float 
            cursor $colorpicker-panel-presets-color-cursor 
            overflow hidden
        .k-color-item
            width $colorpicker-panel-presets-color-width 
            height $colorpicker-panel-presets-color-height 
            box-shadow $colorpicker-panel-presets-color-box-shadow 


requireTheme('colorpicker')