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

@mixin monaco {
    $surface0: #{color.get('elevation/4')};
    $subtext0: #{color.get('elevation/10')};
    $overlay2: #{color.get('elevation/9')};
    $mantle: #{color.get('elevation/0')};
    $base: #{color.get('elevation/3')};
    $accent: #{color.get('primary/base')};
    $text: #{color.get('text')};
    $mauve: #{color.get('palette/purple/base')};
    $peach: #{color.get('palette/orange/base')};
    $teal: #{color.get('palette/teal/base')};
    $green: #{color.get('palette/green/base')};
    $blue: #{color.get('palette/blue/base')};
    $pink: #{color.get('palette/pink/base')};
    
    .monaco-editor {
        --vscode-editor-background: #{$mantle} !important;
        --vscode-editorGutter-background: #{$mantle} !important;

        // selected text
        .selected-text {
            background-color: $surface0 !important;
        }
        // line numbers
        .margin-view-overlays .line-numbers {
            color: $subtext0 !important;
        }
        .line-numbers.active-line-number {
            color: $accent !important;
        }

        // current / cursor line
        .view-overlays .current-line,
        .margin-view-overlays .current-line-margin {
            background-color: #{color.get('elevation/2')} !important;
        }

        // Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess

        // plaintext
        .mtk1 {
            color: $text !important;
        }
        .mtk2 {
            color: #ff69b4 !important;
        }
        // decorators
        .mtk3 {
            color: $peach !important;
        }
        // shell arguments
        .mtk4 {
            color: $teal !important;
        }
        // css constants & pre-defineds
        .mtk5 {
            color: $text !important;
        }
        // keywords
        .mtk6 {
            color: $mauve !important;
        }
        // numbers
        .mtk7 {
            color: $peach !important;
        }
        // comments
        .mtk8 {
            color: $overlay2 !important;
        }
        // sometimes a keyword, apparently
        .mtk9 {
            color: $mauve !important;
        }
        // braces, brackets, parentheses
        .mtk10 {
            color: $subtext0 !important;
        }
        // arrow brackets & equal signs in HTML
        .mtk11 {
            color: $teal !important;
        }
        // @ sign in javascript ¯\_(ツ)_/¯
        .mtk12 {
            color: $teal !important;
        }
        .mtk13 {
            color: #ff69b4 !important;
        }
        .mtk14 {
            color: #ff69b4 !important;
        }
        // regex, css classnames, and HTML keywords (huh)
        .mtk15 {
            color: $mauve !important;
        }
        // shebangs
        .mtk16 {
            color: $overlay2 !important;
        }
        .mtk17 {
            color: #ff69b4 !important;
        }
        .mtk18 {
            color: #ff69b4 !important;
        }
        // glob operator i guess
        .mtk19 {
            color: $teal !important;
        }
        .mtk20 {
            color: #ff69b4 !important;
        }
        // strings
        .mtk21 {
            color: $green !important;
        }
        .mtk22 {
            color: #ff69b4 !important;
        }
        // functions
        .mtk23 {
            color: $blue !important;
        }
        // shell variables
        .mtk24 {
            color: $peach !important;
        }
        // weird variables
        .mtk25 {
            color: $pink !important;
        }

        // .bracket-highlighting-0 {
        //     color: color.mix($text, $red, 40%) !important;
        // }
        // .bracket-highlighting-1 {
        //     color: color.mix($text, $peach, 40%) !important;
        // }
        // .bracket-highlighting-2 {
        //     color: color.mix($text, $yellow, 40%) !important;
        // }
        // .bracket-highlighting-3 {
        //     color: color.mix($text, $green, 40%) !important;
        // }
        // .bracket-highlighting-4 {
        //     color: color.mix($text, $blue, 40%) !important;
        // }
        // .bracket-highlighting-5 {
        //     color: color.mix($text, $mauve, 40%) !important;
        // }
    }
}