/**
 * @class Global_CSS
 */
 
/**
 * @var [$color-by-background-dark-color=null]
 */
$color-by-background-dark-color: dynamic(null);
 
$color-by-background-light-color: dynamic(null);
 
/**
 * @method brightness
 * @ignore
 * Returns the brightness (out of 100) of a specified color.
 * @param {color} $color The color you want the brightness value of
 * @return {number}
 */
@function brightness($color) {
    $r: red($color) / 255 * 100;
    $g: green($color) / 255 * 100;
    $b: blue($color) / 255 * 100;
 
    $brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
    @return $brightness;
}
 
/**
 * @method color-difference
 * @param {color} $c1
 * @param {color} $c2
 * @private
 * @ignore
 */
@function color-difference($c1, $c2) {
    @return (max(red($c1), red($c2)) - min(red($c1), red($c2))) + (max(green($c1), green($c2)) - min(green($c1), green($c2))) + (max(blue($c1), blue($c2)) - min(blue($c1), blue($c2)));
}
 
/**
 * @method color-luminance
 * @param {color} $value
 * @private
 * @ignore
 */
@function color-luminance($value) {
    @if $value <= 0.03928 {
        @return $value / 12.92;
    } @else {
        @return ($value + 0.055)/1.055 * ($value + 0.055)/1.055;
    }
}
 
/**
 * @method luminosity
 * @ignore
 * Returns the luminosity for a specified color
 * @param {color} color The color to check
 * @return {number}
 */
@function luminosity($color) {
    $r: color-luminance(red($color) / 255);
    $g: color-luminance(green($color) / 255);
    $b: color-luminance(blue($color) / 255);
    $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
    @debug 'luminosity for ' + $color + ' is ' + $l;
    @return $l;
}
 
/**
 * @method contrast-ratio
 * @ignore
 * Returns the contrast ratio between two colors
 * @param {color} $color1 The color to check
 * @param {color} $color2 The color to check against
 * @return {number}
 */
@function contrast-ratio($color1, $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);
}