/*!
 * Copyright 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// Colorpicker
.k-colorpicker {
    .k-picker-wrap {
        line-height: calc(@input-height + @input-padding-y*2);
    }

    .k-selected-color {
        vertical-align: top;
        display: inline-block;
        height: calc(@input-height + .35em);
        width: calc(@input-height + .35em);
        .k-i-line {
            font-size: 2em;
            color: #FF525E;
            display: inline-block;
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        .k-i-line:before {
            content: "\e510";
        }
    }
    .k-tool-icon {
        position: relative;
        top: -2px;
        display: inline-block;
        padding: 3px 3px 2px;
        margin-right: 3px;
        margin-left: 2px;
        margin-bottom: 3px;
        background-repeat: no-repeat;
        vertical-align: middle;
        width: @grid-size;
        height: @grid-size;
        .disable-high-contrast();
        .k-selected-color {
            display: block;
            height: 3px;
            width: @grid-size;
            position: absolute;
            left: 3px;
            bottom: -3px;
            border-radius: 0 !important;
        }
    }
    .k-select {
        cursor: pointer;
    }
    .k-picker-wrap .k-icon {
        overflow:visible;
    }
}




// Flat color picker
.k-flatcolorpicker {
    position: relative;
    display: inline-block;
    width: 265px;
    padding-bottom: 5px;

    & {
        background-color: transparent;
        background-image: none;
    }

    .k-selected-color {
        background-image: url("../textures/transtexture.png");
        background-position: 50% 50%;
        text-align: right;

        input.k-color-value {
            font-family: Consolas,"Ubuntu Mono","Lucida Console","Courier New",monospace;
            padding: .75em .1em .65em .1em;
            border: 0;
            margin: 0;
            width: 84%;
        }
        .k-color-input {
            background-color: #fff;
            display: inline-flex;
            width: 84%;
            text-align: left;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }
        .k-clear-color {
            padding: .4em;
            line-height: 0;
            .k-i-reset-color:before {
                color: #000;
                opacity: 0.8;
            }
            .k-i-reset-color:hover,
            .k-i-reset-color:active {
                opacity: 1;
            }
        }
    }

    .k-clear-color-container .k-clear-color.k-state-focused:active {
        color: inherit;
    }
    .k-clear-color-container .k-clear-color:active {
        color: #000;
        opacity: 1;
    }
    .k-selected-color .k-clear-color,
    .k-clear-color-container .k-clear-color {
        .k-i-reset-color {
            background-image: none;
        }
    }

    .k-clear-color-container {
        text-align: left;
    }

    .k-hsv-rectangle {
        position: relative;
        .prohibit-selection;
        -ms-touch-action: pinch-zoom double-tap-zoom;
        .k-draghandle {
            cursor: pointer;
            position: absolute;
            z-index: 10;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            border: 1px solid #eee;
            margin-left: -5px;
            margin-top: -5px;
            border-radius: 6px;
            .box-shadow(0, 1px, 2px, #444);
            background: transparent;
            &:hover, &:focus {
                background: transparent;
                border-color: #fff;
                .box-shadow(0 1px 5px #000);
            }
        }
        &.k-dragging, &.k-dragging * {
            cursor: none;
        }
    }

    .k-slider-horizontal {
        height: 20px;
        width: 90%;
        margin: 0 5%;
        .k-slider-track {
            .box-shadow(~"0 1px 0 #fff, 0 -1px 0 #999");
        }
    }

    .k-hue-slider, .k-transparency-slider {
        display: block;
        .k-slider-selection {
            background: transparent;
        }
        .k-draghandle {
            background: transparent;
            border: 3px solid #eee;
            margin-top: 1px;
            height: 8px;
            width: 8px;
            .box-shadow(0 1px 4px #444);
            &:hover, &:focus {
                background: transparent;
                border-color: #fff;
                .box-shadow(0 1px 5px #000);
                border-width: 2px;
                padding: 1px;
            }
        }
    }

    .k-hue-slider {
        .k-slider-track {
            background: linear-gradient(to right,  #ff0000 0%, #ffff00 16%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 84%, #ff0004 100%);
        }
    }

    .k-transparency-slider {
        .k-slider-track {
            background-image: url("../textures/transparency.png");
            background-size: 100% auto;
            background-position: 100% 50%;
            background-repeat: no-repeat;
        }
    }

    .k-controls {
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: center;
        font-size: 90%;
        .k-button {
            width: 6em;
        }
    }

    .k-hsv-gradient {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%), linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        height: 180px;
        margin-bottom: 5px;
    }

    .k-ie9 & {
        .k-hue-slider {
            .k-slider-track {
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE2JSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
            }
        }
        .k-hsv-gradient {
            background:
            url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+),
            url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        }
    }
}




// Color palette
.k-colorpalette {
    position: relative;
    line-height: 0;
    border-width: 0;
    display: inline-block;

    .k-palette {
        border-collapse: collapse;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .k-item {
        width: 14px;
        height: 14px;
        overflow: hidden;
        .disable-high-contrast();

        &.k-state-selected,
        &.k-state-selected:hover {
            z-index: 100;
            background: transparent;
            box-shadow: 0 1px 3px 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.45);
            position: relative;
        }
    }

    .k-item:hover {
        z-index: 101;
        position: relative;
        box-shadow: 0 1px 3px 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.3);
    }
}