/**
 * @class Ext.picker.Color
 */
 
/**
 * @var {color}
 * The background-color of Color Pickers
 */
$colorpicker-background-color: dynamic(#fff);
 
/**
 * @var {color}
 * The border-color of Color Pickers
 */
$colorpicker-border-color: dynamic($colorpicker-background-color);
 
/**
 * @var {number}
 * The border-width of Color Pickers
 */
$colorpicker-border-width: dynamic(0);
 
/**
 * @var {string}
 * The border-style of Color Pickers
 */
$colorpicker-border-style: dynamic(solid);
 
/**
 * @var {number}
 * The number of columns to display in the Color Picker
 */
$colorpicker-columns: dynamic(8);
 
/**
 * @var {number}
 * The number of rows to display in the Color Picker
 */
$colorpicker-rows: dynamic(5);
 
/**
 * @var {number}
 * The height of each Color Picker item
 */
$colorpicker-item-height: dynamic(18px);
 
/**
 * @var {number}
 * The width of each Color Picker item
 */
$colorpicker-item-width: dynamic(18px);
 
/**
 * @var {number}
 * The padding of each Color Picker item
 */
$colorpicker-item-padding: dynamic(2px);
 
/**
 * @var {string}
 * The cursor to display when the mouse is over a Color Picker item
 */
$colorpicker-item-cursor: dynamic(pointer);
 
/**
 * @var {color}
 * The border-color of Color Picker items
 */
$colorpicker-item-border-color: dynamic($colorpicker-background-color);
 
/**
 * @var {number}
 * The border-width of Color Picker items
 */
$colorpicker-item-border-width: dynamic(1px);
 
/**
 * @var {string}
 * The border-style of Color Picker items
 */
$colorpicker-item-border-style: dynamic(solid);
 
/**
 * @var {color}
 * The border-color of hovered Color Picker items
 */
$colorpicker-item-border-color-over: dynamic($neutral-color);
 
/**
 * @var {color}
 * The background-color of Color Picker items
 */
$colorpicker-item-background-color: dynamic($colorpicker-background-color);
 
/**
 * @var {color}
 * The background-color of hovered Color Picker items
 */
$colorpicker-item-background-color-over: dynamic(#fff);
 
/**
 * @var {color}
 * The border-color of the selected Color Picker item
 */
$colorpicker-item-border-color-selected: dynamic($colorpicker-item-border-color-over);
 
/**
 * @var {color}
 * The background-color of the selected Color Picker item
 */
$colorpicker-item-background-color-selected: dynamic($colorpicker-item-background-color-over);
 
/**
 * @var {color}
 * The inner border-color of Color Picker items
 */
$colorpicker-item-inner-border-color: dynamic($neutral-color);
 
/**
 * @var {number}
 * The inner border-width of Color Picker items
 */
$colorpicker-item-inner-border-width: dynamic(1px);
 
/**
 * @var {string}
 * The inner border-style of Color Picker items
 */
$colorpicker-item-inner-border-style: dynamic(solid);
t plain null-grammar">    }
}
 
@function check-opacity($color) {
    @if (opacity($color) == 0) {
        $color: opacify($color, 1);
    }
    @if $color == transparent {
        $color: opacify($color, 1);
    }
    @return $color;
}
 
@function color-by-background($bg-color, $contrast: $default-text-contrast, $light-color: null, $dark-color: null) {
    @if $bg-color == null {
        @return null;
    }
 
    $bg-color: check-opacity($bg-color);
    $tmpmode: get-color-mode($bg-color);
 
    @return color-offset(
        $color: $bg-color,
        $contrast: $contrast,
        $mode: $tmpmode,
        $inverse: true,
        $light-color: $light-color,
        $dark-color: $dark-color
    );
}
 
@function get-inset-offset($mode){
    @if $mode == light {
        @return 1px;
    } @else {
        @return -1px;
    }
}
 
@function safe-saturate($color, $amount) {
    @if saturation($color) > 0 {
        @return saturate($color, $amount);
    } @else {
        @return $color;
    }
}
 
/**
 * Colors the text of an element based on lightness of its background.
 *
 *     .my-element {
 *       @include color-by-background(#fff); // Colors text black.
 *     }
 *
 *     .my-element {
 *       @include color-by-background(#fff, 40%); // Colors text gray.
 *     }
 *
 * @param {color} $bg-color Background color of element.
 * @param {percent} [$contrast=$default-text-contrast] Contrast of text color to its background.
 * @param {boolean} [$default-color=false]
 * @param {boolean} [$inset-text=false]
 *
 */
@mixin color-by-background(
    $bg-color,
    $contrast: $default-text-contrast,
    $default-color: false,
    $inset-text: false
) {
    @if $bg-color != null {
        @if $default-color {
            color: color-by-background(hsla(hue($default-color), saturation($default-color), lightness($bg-color), opacity($bg-color)), $contrast);
        } @else {
            color: color-by-background($bg-color, $contrast);
        }
 
        @if $inset-text {
            @include inset-by-background($bg-color);
        }
    }
}
 
@mixin inset-by-background($bg-color, $contrast: 10%, $box: false) {
    $bg-color: check-opacity($bg-color);
    $offset: get-inset-offset(get-color-mode($bg-color));
 
    @if ($box == true) {
        @include box-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
    }
 
    @include text-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
}
 
@function hsv-to-rgb($color) {
    $r: red($color) / 255;
    $g: green($color) / 255;
    $b: blue($color) / 255;
    $a: opacity($color);
}
 
// @debug hsv(rgba(#3E87E3, .5));
 
@function brighten($color, $amount) {
    $current_brightness: brightness($color);
}