/*!
 * Copyright 2021 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.
 */
// ColorPalette

.k-colorpalette-tile {

    &:focus,
    &.k-state-focus,
    &.k-focus {
        .box-shadow( @colorpalette-tile-focus-shadow );
    }

    &:hover,
    &.k-state-hover,
    &.k-hover {
        .box-shadow( @colorpalette-tile-hover-shadow );
    }

    &.k-state-selected,
    &.k-state-selected:hover {
        .box-shadow( @colorpalette-tile-selected-shadow );
    }

}


// ColorGradient
.k-colorgradient {
    .fill(
        @colorgradient-text,
        @colorgradient-bg,
        @colorgradient-border
    );
}

.k-colorgradient:focus,
.k-colorgradient.k-state-focus,
.k-colorgradient.k-focus {
    .fill( @border: @colorgradient-focus-border );
    .box-shadow( @colorgradient-focus-shadow );
}

.k-colorgradient-canvas .k-hsv-gradient {
    background: linear-gradient( to bottom, @gradient-transparent-to-black ), linear-gradient( to right, @gradient-white-to-transparent );
}

.k-colorgradient .k-draghandle {
    .fill(
        @colorgradient-draghandle-text,
        @colorgradient-draghandle-bg,
        @colorgradient-draghandle-border
    );
    .box-shadow( @colorgradient-draghandle-shadow );

    &:focus,
    &.k-state-focus,
    &.k-focus {
        .fill( @bg: transparent, @border: white );
        .box-shadow( @colorgradient-draghandle-focus-shadow );
    }

    &:active,
    &:hover,
    &.k-state-hover,
    &.k-hover {
        .fill( @bg: transparent, @border: white );
        .box-shadow( @colorgradient-draghandle-hover-shadow );
    }

    &.k-state-selected:hover {
        .fill( @bg: transparent, @border: white, @text: inherit );
    }

    &.k-state-focused.k-state-selected {
        .fill( @bg: transparent, @border: white, @text: inherit );
        .box-shadow( @colorgradient-draghandle-hover-shadow );
    }
}

.k-colorgradient-slider.k-hue-slider {
    &.k-slider-horizontal .k-slider-track {
        background: linear-gradient( to right, @gradient-rainbow );
    }

    &.k-slider-vertical .k-slider-track {
        background: linear-gradient( to top, @gradient-rainbow );
    }
}

.k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") center repeat;
}

.k-colorgradient-input-label {
    .fill( @text: @colorgradient-input-label-text );
}

.k-colorgradient .k-text-success {
    color: @success;
}


// Color Preview
.k-color-preview {
    .fill(
        @color-preview-text,
        @color-preview-bg,
        @color-preview-border
    );

    &::before {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC");
        background-size: contain;
        background-position: 0;
    }

    &:hover,
    &.k-state-hover,
    &.k-hover {
        .fill( @border: @color-preview-hover-border );
    }
}

// No Color
.k-no-color::after {
    @no-color-svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" version="1.1"><line x1="0" x2="20" y1="0" y2="20" stroke="@{color-preview-no-color-text}" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,@{no-color-svg}');
    background-color: @color-preview-no-color-bg;
    background-size: 100% 100%;
}


// ColorEditor/FlatColorPicker
.k-coloreditor {
    .fill(
        @coloreditor-text,
        @coloreditor-bg,
        @coloreditor-border
    );
}

.k-coloreditor:focus,
.k-coloreditor.k-state-focus,
.k-coloreditor.k-focus {
    .fill( @border: @coloreditor-focus-border );
    .box-shadow( @coloreditor-focus-shadow );
}