/**
 * @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);
class="variable scss"> $color2) {
    $l1: luminosity($color1);
    $l2: luminosity($color2);
 
    @if $l2 > $l1 {
        @return $l2 / $l1;
    } @else {
        @return $l1 / $l2;
    }
}
 
@function get-color-mode($color) {
    @if brightness($color) > 65 {
        @return light;
    } @else {
        @return dark;
    }
}
 
$color-mode: 'inverse';
 
@function color-offset($color, $contrast: 85%, $mode: $color-mode, $inverse: false, $light-color: null, $dark-color: null) {
    $flat_color: check-opacity($color);
 
    @if $mode == inverse {
        $mode: reverse-color-mode($color-mode);
    }
 
    @if $inverse == true {
        $mode: reverse-color-mode($mode);
    }
 
    @if ($mode == light) {
        @return $light-color or $color-by-background-light-color or rgba(lighten($flat_color, $contrast), opacity($color));
    } @else if ($mode == dark) {
        @return $dark-color or $color-by-background-dark-color or rgba(darken($flat_color, $contrast), opacity($color));
    } @else {
        @debug $mode + " is not a valid color mode. Use light, dark, or inverse.";
        @return white;
    }
}
 
@function reverse-color-mode($mode) {
    @if $mode == dark {
        @return light;
    } @else {
        @return dark;
    }
}
 
@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);
}