@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;

@mixin colors($is-dark: true) {
    $scheme: if($is-dark, 'dark', 'light');
    $scheme-inverted: if($is-dark, 'light', 'dark');

    :root {
        accent-color: var(--color-accent);

        @if $is-dark {
            color-scheme: dark;
            --is-dark-theme: true;
        } @else {
            color-scheme: light;
            --is-dark-theme: false;
        }

        // ┌─────────┐
        // │ primary │
        // └─────────┘
        --color-primary: #{color.get('primary/base')};
        --color-primary-contrast: #{color.get('primary/base', 'contrast')};

        // dark
        --color-primary-dark-1: #{color.get('primary/' + $scheme-inverted + '/3%')};
        --color-primary-dark-2: #{color.get('primary/' + $scheme-inverted + '/6%')};
        --color-primary-dark-3: #{color.get('primary/' + $scheme-inverted + '/9%')};
        --color-primary-dark-4: #{color.get('primary/' + $scheme-inverted + '/10%')};
        --color-primary-dark-5: #{color.get('primary/' + $scheme-inverted + '/20%')};
        --color-primary-dark-6: #{color.get('primary/' + $scheme-inverted + '/25%')};
        --color-primary-dark-7: #{color.get('primary/' + $scheme-inverted + '/30%')};

        // light
        --color-primary-light-1: #{color.get('primary/' + $scheme + '/3%')};
        --color-primary-light-2: #{color.get('primary/' + $scheme + '/6%')};
        --color-primary-light-3: #{color.get('primary/' + $scheme + '/10%')};
        --color-primary-light-4: #{color.get('primary/' + $scheme + '/15%')};
        --color-primary-light-5: #{color.get('primary/' + $scheme + '/20%')};
        --color-primary-light-6: #{color.get('primary/' + $scheme + '/30%')};
        --color-primary-light-7: #{color.get('primary/' + $scheme + '/40%')};

        // alpha
        --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1);
        --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2);
        --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3);
        --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4);
        --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5);
        --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6);
        --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7);
        --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8);
        --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9);

        // states
        --color-primary-hover: var(--color-primary-light-1);
        --color-primary-active: var(--color-primary-light-3);

        // ┌───────────┐
        // │ secondary │ » secondary
        // └───────────┘
        --color-secondary: #{color.get('secondary/base')};

        // dark
        --color-secondary-dark-1:  #{color.get('secondary/' + $scheme-inverted + '/3%')};
        --color-secondary-dark-2:  #{color.get('secondary/' + $scheme-inverted + '/6%')};
        --color-secondary-dark-3:  #{color.get('secondary/' + $scheme-inverted + '/9%')};
        --color-secondary-dark-4:  #{color.get('secondary/' + $scheme-inverted + '/12%')};
        --color-secondary-dark-5:  #{color.get('secondary/' + $scheme-inverted + '/15%')};
        --color-secondary-dark-6:  #{color.get('secondary/' + $scheme-inverted + '/20%')};
        --color-secondary-dark-7:  #{color.get('secondary/' + $scheme-inverted + '/25%')};
        --color-secondary-dark-8:  #{color.get('secondary/' + $scheme-inverted + '/30%')};
        --color-secondary-dark-9:  #{color.get('secondary/' + $scheme-inverted + '/35%')};
        --color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')};
        --color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')};
        --color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')};
        --color-secondary-dark-13: #{color.get('secondary/' + $scheme-inverted + '/55%')};

        // light
        --color-secondary-light-1: #{color.get('secondary/' + $scheme + '/3%')};
        --color-secondary-light-2: #{color.get('secondary/' + $scheme + '/6%')};
        --color-secondary-light-3: #{color.get('secondary/' + $scheme + '/9%')};
        --color-secondary-light-4: #{color.get('secondary/' + $scheme + '/12%')};

        // alpha
        --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1);
        --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2);
        --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3);
        --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4);
        --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5);
        --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6);
        --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7);
        --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8);
        --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9);

        // states
        --color-secondary-button: var(--color-secondary-dark-4);
        --color-secondary-hover: var(--color-secondary-dark-3);
        --color-secondary-active: var(--color-secondary-dark-2);

        // ┌─────────┐
        // │ console │ » used for actions console and console files
        // └─────────┘
        --color-console-fg: #f7f8f9;
        --color-console-fg-subtle: #bdc4cc;
        --color-console-bg: #171b1e;
        --color-console-border: #2e353b;
        --color-console-hover-bg: #272d33;
        --color-console-active-bg: #2e353b;
        --color-console-menu-bg: #262b31;
        --color-console-menu-border: #414b55;

        // ┌───────┐
        // │ named │
        // └───────┘
        --color-red:    #{color.get('palette/red/base')};
        --color-orange: #{color.get('palette/orange/base')};
        --color-yellow: #{color.get('palette/yellow/base')};
        --color-olive:  #{color.get('palette/olive/base')};
        --color-green:  #{color.get('palette/green/base')};
        --color-teal:   #{color.get('palette/teal/base')};
        --color-blue:   #{color.get('palette/blue/base')};
        --color-violet: #{color.get('palette/violet/base')};
        --color-purple: #{color.get('palette/purple/base')};
        --color-pink:   #{color.get('palette/pink/base')};
        --color-brown:  #{color.get('palette/brown/base')};
        --color-black:  #{color.get('palette/black/base')};

        // ┌───────┐
        // │ named │ » contrasts (lugit addition)
        // └───────┘
        --color-green-contrast: #{if($is-dark, var(--color-black), var(--color-white))};
        --color-red-contrast:   #{if($is-dark, var(--color-black), var(--color-white))};


        // ┌───────┐
        // │ named │ » light variants
        // └───────┘
        --color-red-light:    #{color.get('palette/red/light/10%')};
        --color-orange-light: #{color.get('palette/orange/light/10%')};
        --color-yellow-light: #{color.get('palette/yellow/light/10%')};
        --color-olive-light:  #{color.get('palette/olive/light/10%')};
        --color-green-light:  #{color.get('palette/green/light/10%')};
        --color-teal-light:   #{color.get('palette/teal/light/10%')};
        --color-blue-light:   #{color.get('palette/blue/light/10%')};
        --color-violet-light: #{color.get('palette/violet/light/10%')};
        --color-purple-light: #{color.get('palette/purple/light/10%')};
        --color-pink-light:   #{color.get('palette/pink/light/10%')};
        --color-brown-light:  #{color.get('palette/brown/light/10%')};
        --color-black-light:  #{if(
                $is-dark,
                color.get('palette/black/light/10%'),
                color.get('palette/white/light/10%')
            )};

        // ┌───────┐
        // │ named │ » dark 1 variants
        // └───────┘
        --color-red-dark-1:    #{color.get('palette/red/dark/10%')};
        --color-orange-dark-1: #{color.get('palette/orange/dark/10%')};
        --color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')};
        --color-olive-dark-1:  #{color.get('palette/olive/dark/10%')};
        --color-green-dark-1:  #{color.get('palette/green/dark/10%')};
        --color-teal-dark-1:   #{color.get('palette/teal/dark/10%')};
        --color-blue-dark-1:   #{color.get('palette/blue/dark/10%')};
        --color-violet-dark-1: #{color.get('palette/violet/dark/10%')};
        --color-purple-dark-1: #{color.get('palette/purple/dark/10%')};
        --color-pink-dark-1:   #{color.get('palette/pink/dark/10%')};
        --color-brown-dark-1:  #{color.get('palette/brown/dark/10%')};
        --color-black-dark-1:  #{if(
                $is-dark,
                color.get('palette/black/dark/10%'),
                color.get('palette/white/dark/10%')
            )};

        // ┌───────┐
        // │ named │ » dark 2 variants
        // └───────┘
        --color-red-dark-2:    #{color.get('palette/red/dark/20%')};
        --color-orange-dark-2: #{color.get('palette/orange/dark/20%')};
        --color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')};
        --color-olive-dark-2:  #{color.get('palette/olive/dark/20%')};
        --color-green-dark-2:  #{color.get('palette/green/dark/20%')};
        --color-teal-dark-2:   #{color.get('palette/teal/dark/20%')};
        --color-blue-dark-2:   #{color.get('palette/blue/dark/20%')};
        --color-violet-dark-2: #{color.get('palette/violet/dark/20%')};
        --color-purple-dark-2: #{color.get('palette/purple/dark/20%')};
        --color-pink-dark-2:   #{color.get('palette/pink/dark/20%')};
        --color-brown-dark-2:  #{color.get('palette/brown/dark/20%')};
        --color-black-dark-2:  #{if(
                $is-dark,
                color.get('palette/black/dark/20%'),
                color.get('palette/white/dark/20%')
            )};  

        // ┌──────┐
        // │ ansi │ » for actions console and console files
        // └──────┘
        --color-ansi-black:          #1e2327;
        --color-ansi-red:            #cc4848;
        --color-ansi-green:          #87ab63;
        --color-ansi-yellow:         #cc9903;
        --color-ansi-blue:           #3a8ac6;
        --color-ansi-magenta:        #d22e8b;
        --color-ansi-cyan:           #00918a;
        --color-ansi-white:          var(--color-console-fg-subtle);
        --color-ansi-bright-black:   #424851;
        --color-ansi-bright-red:     #d15a5a;
        --color-ansi-bright-green:   #93b373;
        --color-ansi-bright-yellow:  #eaaf03;
        --color-ansi-bright-blue:    #4e96cc;
        --color-ansi-bright-magenta: #d74397;
        --color-ansi-bright-cyan:    #00b6ad;
        --color-ansi-bright-white:   var(--color-console-fg);

        // ┌───────┐
        // │ other │
        // └───────┘
        --color-grey:       #{color.get('elevation/9')};
        --color-grey-light: #{color.get('elevation/11')};
        --color-gold:       #{color.get('palette/yellow/dark/20%')};
        --color-white:      #{color.get('palette/white/base')}; 
        --color-git:        #f05133;

        // ┌──────┐
        // │ diff │
        // └──────┘
        --color-diff-added-linenum-bg:   #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
        --color-diff-added-row-bg:       #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))};
        --color-diff-added-row-border:   #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))};
        --color-diff-added-word-bg:      #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))};
        --color-diff-moved-row-bg:       #{if($is-dark, #{color.get('palette/yellow/dark/75%')}, rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, .25))};
        --color-diff-moved-row-border:   #{if($is-dark, #{color.get('palette/yellow/dark/65%')}, rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, .25))};
        --color-diff-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
        --color-diff-removed-row-bg:     #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))};
        --color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))};
        --color-diff-removed-word-bg:    #{if($is-dark, #{color.get('palette/red/dark/55%')}, rgba(#{color.get('palette/red/light/25%', 'rgb')}, .2))};
        --color-diff-inactive:           #{if($is-dark, #{color.get('elevation/6')}, red)};

        // ┌────────┐
        // │ status │
        // └────────┘
        --color-error-border:    #{color.get('palette/red/base')};
        --color-error-bg:        rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
        --color-error-bg-active: #{color.get('palette/red/light/6%')};
        --color-error-bg-hover:  #{color.get('palette/red/light/12%')};
        --color-error-text:      #{color.get('palette/red/base')};
        --color-success-border:  #{color.get('palette/green/light/12%')};
        --color-success-bg:      rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
        --color-success-text:    #{color.get('text')};
        --color-warning-border:  #{color.get('palette/yellow/light/12%')};
        --color-warning-bg:      #{color.get('palette/yellow/base')};
        --color-warning-text:    #{color.get('elevation/3')};
        --color-info-border:     #{color.get('palette/blue/light/12%')};
        --color-info-bg:         #{color.get('elevation/3')};
        --color-info-text:       #{color.get('text')};

        // ┌───────┐
        // │ badge │
        // └───────┘
        --color-red-badge:             #{color.get('palette/red/dark/20%')};
        --color-red-badge-bg:          rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .1);
        --color-red-badge-hover-bg:    rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2);

        --color-green-badge:           #{color.get('palette/green/base')};
        --color-green-badge-bg:        rgba(#{color.get('palette/green/base', 'rgb')}, .1);
        --color-green-badge-hover-bg:  rgba(#{color.get('palette/green/base', 'rgb')}, .2);

        --color-yellow-badge:          #{color.get('palette/yellow/dark/10%')};
        --color-yellow-badge-bg:       rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1);
        --color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2);

        --color-orange-badge:          #{color.get('palette/orange/dark/10%')};
        --color-orange-badge-bg:       rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1);
        --color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2);

        // ┌──────────────┐
        // │ target-based │
        // └──────────────┘

        // body colors
        --color-body:         #{color.get('elevation/3')};
        --color-text-dark:    #{color.get('text')};
        --color-text:         #{color.get('text')};
        --color-text-light:   #{color.get('subtle')};
        --color-text-light-1: #{color.get('subtle')};
        --color-text-light-2: #{color.get('subtle')};
        --color-text-light-3: #{color.get('subtle')};
        --color-footer:       rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
        --color-timeline:     #{color.get('elevation/5')};
        --color-timeline-badge-fg:  #{if($is-dark, var(--color-white), var.get('color-text'))};

        // box
        --color-box-header:         #{rgba(color.get('elevation/4', 'rgb'), 1)};
        --color-box-body:           #{color.get('elevation/3')};
        --color-box-body-highlight: #{color.get('elevation/4')};
        
        // input
        --color-input-text:              var(--color-text-dark);
        --color-input-background:        #{color.get('elevation/4')};
        --color-input-toggle-background: #{color.get('elevation/4')};
        --color-input-border:            #{color.get('elevation/5')};
        --color-input-border-hover:      #{color.get('elevation/6')};

        // light
        --color-light: #00001728;
        --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
        --color-light-border: #{color.get('elevation/6')};
        --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
        --color-hover-opaque: #{color.get('elevation/6', 'rgb')};
        --color-active: #{color.get('elevation/5')};
        --color-menu: #{color.get('elevation/4')};
        --color-card: #{color.get('elevation/3')};
        --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
        --color-markup-code-block: #{color.get('elevation/4')};
        --color-markup-code-inline: #{color.get('elevation/4')};
        --color-button: #{color.get('elevation/4')};
        --color-code-bg: #{color.get('elevation/3')};
        --color-shadow: #{if($is-dark, rgba(#{color.get('elevation/1', 'rgb')}, 0.5), rgba(#{color.get('elevation/6', 'rgb')}, 0.5))};
        --color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))};

        --color-shadow-rgb: #{if($is-dark, color.get('elevation/1', 'rgb'), color.get('elevation/6', 'rgb'))};

        --color-secondary-bg: #{color.get('elevation/4')};
        --color-expand-button: #{color.get('elevation/6')};
        --color-placeholder-text: #{color.get('elevation/9')};
        --color-editor-line-highlight: var(--color-primary-light-5);
        --color-project-column-bg: #{color.get('elevation/1')};
        --color-caret: var(--color-text);
        --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
        --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
        --color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
        --color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))};
        --color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
        --color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);

        // navbar
        --color-nav-bg:                 #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))};
        --color-nav-hover-bg:           #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/5'), color.get('elevation/5')))};
        --color-nav-text:               #{color.get('navbar/fg', $default: var(--color-text))};
        --color-secondary-nav-bg:       #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))};
        --color-secondary-nav-hover-bg: #{if($is-dark, color.get('elevation/4'), color.get('elevation/5'))};

        // label
        --color-label-text: var(--color-text);
        --color-label-bg: #7282924b;
        --color-label-hover-bg: #728292a0;
        --color-label-active-bg: #728292ff;

        // accents
        --color-accent: #{color.get('accent', $default: color.get('palette/blue/dark/25%'))};
        --color-small-accent: #{color.get('accent', $default: var(--color-primary-light-5))};
        --color-highlight-fg: #{color.get('palette/yellow/dark/20%')};
        --color-highlight-bg: #{color.get('palette/yellow/dark/75%')};
    }

    #commits-table {
        // even rows color
        --color-light: transparent !important;
    }

    #navbar {
        #navbar-logo {
            img {
                height: var.get('navbar-logo/height') !important;
                width: var.get('navbar-logo/width') !important;
            }
        }
    }

    .markup {
        code {
            border-radius: var.get('measure/.375x') !important;
        }

        p {
            line-height: 1.5 !important;
        }
    }

    // ::selection {
    //     background-color: #{color.get('primary/dark/60%')};
    //     color: #{color.get('primary/dark/60%', 'contrast')};
    // }

    ::selection {
        background-color: #{color.get('primary/dark/30%')};
        color: #{color.get('white/base')};
    }

    // // In dark mode, invert emojis that are hard to read otherwise
    @if $is-dark {
        .emoji[aria-label="check mark"],
        .emoji[aria-label="currency exchange"],
        .emoji[aria-label="TOP arrow"],
        .emoji[aria-label="END arrow"],
        .emoji[aria-label="ON! arrow"],
        .emoji[aria-label="SOON arrow"],
        .emoji[aria-label="heavy dollar sign"],
        .emoji[aria-label="copyright"],
        .emoji[aria-label="registered"],
        .emoji[aria-label="trade mark"],
        .emoji[aria-label="multiply"],
        .emoji[aria-label="plus"],
        .emoji[aria-label="minus"],
        .emoji[aria-label="divide"],
        .emoji[aria-label="curly loop"],
        .emoji[aria-label="double curly loop"],
        .emoji[aria-label="wavy dash"],
        .emoji[aria-label="paw prints"],
        .emoji[aria-label="musical note"],
        .emoji[aria-label="musical notes"] {
            filter: invert(100%) hue-rotate(180deg);
        }
    }
}
