// This file provides mixins and functions that can be used to manipulate colors for dark/light modes.

@mixin text-color($important: false) {
    color: #333 unquote(if($important, "!important", ""));
    html.dark-mode & { color: #c5d1d3 unquote(if($important, "!important", "")); }
}

@mixin text-highlight-color($important: false) {
    color: #141414 unquote(if($important, "!important", ""));
    html.dark-mode & { color: #e5f1f3 unquote(if($important, "!important", "")); }
}

@mixin text-dim-color($important: false) {
    color: #777 unquote(if($important, "!important", ""));
    html.dark-mode & { color: #6b787a unquote(if($important, "!important", "")); }
}

@mixin text-button-color($important: false) {
    color: #fff unquote(if($important, "!important", ""));
    html.dark-mode & { color: #e2e8e9 unquote(if($important, "!important", "")); }
}

@mixin border-color($important: false) {
    border-color: #ddd unquote(if($important, "!important", ""));
    html.dark-mode & { border-color: #4d6066 unquote(if($important, "!important", "")); }
}

@mixin border-strong-color($important: false) {
    border-color: #b2b2b2 unquote(if($important, "!important", ""));
    html.dark-mode & { border-color: #8da4aa unquote(if($important, "!important", "")); }
}

@mixin border-highlight-color($important: false) {
    border-color: #aaa unquote(if($important, "!important", ""));
    html.dark-mode & { border-color: #e5f1f3 unquote(if($important, "!important", "")); }
}

@mixin background-color($important: false) {
    background-color: #fff unquote(if($important, "!important", ""));
    html.dark-mode & { background-color: #21292c unquote(if($important, "!important", "")); }
}

@mixin background-highlight-color($percent: 5, $important: false) {
    background-color: rgba(0, 0, 0, $percent / 100) unquote(if($important, "!important", ""));
    html.dark-mode & { background-color: rgba(255, 255, 255, $percent / 100) unquote(if($important, "!important", "")) }
}

@mixin background-error-color($important: false) {
    background-color: #ffcccc unquote(if($important, "!important", ""));
    html.dark-mode & { background-color: #60252a unquote(if($important, "!important", "")) }
}

@mixin background-badge-color($important: false) {
    background-color: #a7411f unquote(if($important, "!important", ""));
    html.dark-mode & { background-color: #802824 unquote(if($important, "!important", "")) }
}

@mixin background-button-color($important: false) {
    background-color: #37beff unquote(if($important, "!important", ""));
    html.dark-mode & { background-color: #006a9d unquote(if($important, "!important", "")) }
}

@mixin error-text-color($important: false) {
    color: #7e1c16 unquote(if($important, "!important", ""));
    html.dark-mode & { color: #d57a70 unquote(if($important, "!important", "")); }
}

@mixin success-text-color($important: false) {
    color: #006600 unquote(if($important, "!important", ""));
    html.dark-mode & { color: #82d57f unquote(if($important, "!important", "")); }
}

@mixin warning-text-color($important: false) {
    color: #7f6000 unquote(if($important, "!important", ""));
    html.dark-mode & { color: #d5bd96 unquote(if($important, "!important", "")); }
}

@mixin page-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
}

@mixin popup {
    background-color: #fff;
    border: 1px solid #d4dbde;
    box-shadow: 3px 3px 5px #dcdedf;

    html.dark-mode & {
        background-color: #161b1d;
        border-color: #4d6066;
        box-shadow: none;
    }
}

@mixin success-box {
    background-color: #E0F2F1;
    color: #006053;
    border: 1px solid #b0e3ca;
    border-radius: 4px;
    padding: 5px;

    html.dark-mode & {
        background-color: #00553f;
        color: #fff;
        border-color: transparent;
    }
}

@mixin error-box {
    background-color: #ffe5e5;
    color: #7e1c16;
    border: 1px solid #fcc3bb;
    border-radius: 4px;
    padding: 5px;

    html.dark-mode & {
        background-color: #5a2417;
        color: #fff;
        border-color: transparent;
    }
}

@mixin warning-box {
    background-color: #fef893;
    color: #795000;
    border: 1px solid #ffdf0e;
    border-radius: 4px;
    padding: 5px;

    html.dark-mode & {
        background-color: #654f00;
        color: #fff;
        border-color: transparent;
    }
}

@mixin info-box {
    background-color: #FFF3E0;
    border: 1px solid #FFAB91;
    color: #764a2c;
    border-radius: 4px;
    padding: 5px;

    html.dark-mode & {
        background-color: #463813;
        color: #fff4f0;
        border-color: transparent;
    }
}

@function hex-to-dec($string) {
    $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
    $string: to-lower-case($string);
    $length: str-length($string);

    $dec: 0;
    @for $i from 1 through $length {
        $factor: 1 + (15 * ($length - $i));
        $index: index($hex, str-slice($string, $i, $i));
        $dec: $dec + $factor * ($index - 1);
    }

    @return $dec;
}

@function dec-to-hex($d) {
    $hexVals: "a" "b" "c" "d" "e" "f";
    $base: 16;
    $quotient: $d;
    $result: "";
    @if $d == 0 {
        $result: "00";
    }
    @while $quotient != 0 {
        $mod: $quotient % $base;
        $quotient: floor($quotient / $base);
        @if $mod > 9 {
            $mod: nth($hexVals, $mod - 9);
        }
        @if $d < $base {
            $result: "0" + $mod;
        } @else {
            $result: $mod + $result;
        }
    }
    @return $result;
}

@function hex-to-color($string) {
    @return rgb(
            hex-to-dec(str-slice($string, 1, 2)),
            hex-to-dec(str-slice($string, 3, 4)),
            hex-to-dec(str-slice($string, 5, 6))
    );
}

@function color-to-hex($color) {
    @return dec-to-hex(red($color)) + dec-to-hex(green($color)) + dec-to-hex(blue($color))
}