@use '@lucas-labs/lui-micro/color' as color;
@use './modules/chroma' as chroma;
@use './modules/codemirror' as codemirror;
@use './modules/custom' as custom;
@use '@lucas-labs/lui-micro/var' as var;

@mixin make-theme($is-dark: true) {
    $lvl1: #{color.get('elevation/3')};
    $lvl1-rgb: #{color.get('elevation/3', 'rgb')};
    $lvl2: #{color.get('elevation/2')};
    $lvl2-rgb: #{color.get('elevation/2', 'rgb')};
    $lvl3: #{color.get('elevation/1')};
    $lvl3-rgb: #{color.get('elevation/1', 'rgb')};

    :root {
        * {
            --fonts-regular: #{var.get('font-family')};
            --fonts-monospace: #{var.get('code-font-family')};
        }

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

        accent-color: #{color.get('primary/base')};

        --color-primary: #{color.get('primary/base')};
        --color-primary-contrast: #{color.get('primary/base', 'contrast')};

        --color-primary-dark-1: #{color.get('primary/dark/3%')};
        --color-primary-dark-2: #{color.get('primary/dark/6%')};
        --color-primary-dark-3: #{color.get('primary/dark/9%')};
        --color-primary-dark-4: #{color.get('primary/dark/12%')};
        --color-primary-dark-5: #{color.get('primary/dark/15%')};
        --color-primary-dark-6: #{color.get('primary/dark/18%')};
        --color-primary-dark-7: #{color.get('primary/dark/21%')};

        --color-primary-light-1: #{color.get('primary/light/3%')};
        --color-primary-light-2: #{color.get('primary/light/6%')};
        --color-primary-light-3: #{color.get('primary/light/9%')};
        --color-primary-light-4: #{color.get('primary/light/12%')};
        --color-primary-light-5: #{color.get('primary/light/15%')};
        --color-primary-light-6: #{color.get('primary/light/18%')};
        --color-primary-light-7: #{color.get('primary/light/21%')};

        --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);

        --color-secondary: #{color.get('elevation/5')};

        --color-secondary-dark-1: #{color.get('secondary/light/3%')};
        --color-secondary-dark-2: #{color.get('secondary/light/6%')};
        --color-secondary-dark-3: #{color.get('secondary/light/9%')};
        --color-secondary-dark-4: #{color.get('secondary/light/12%')};
        --color-secondary-dark-5: #{color.get('secondary/light/15%')};
        --color-secondary-dark-6: #{color.get('secondary/light/18%')};
        --color-secondary-dark-7: #{color.get('secondary/light/21%')};
        --color-secondary-dark-8: #{color.get('secondary/light/24%')};
        --color-secondary-dark-9: #{color.get('secondary/light/27%')};
        --color-secondary-dark-10: #{color.get('secondary/light/30%')};
        --color-secondary-dark-11: #{color.get('secondary/light/33%')};
        --color-secondary-dark-12: #{color.get('secondary/light/36%')};
        --color-secondary-dark-13: #{color.get('secondary/light/39%')};

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

        --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);

        /* colors */
        --color-red: #{color.get('theme/red/base')};
        --color-orange: #{color.get('theme/peach/base')};
        --color-yellow: #{color.get('theme/yellow/base')};
        --color-olive: #{color.get('theme/green/base')};
        --color-green: #{color.get('theme/green/base')};
        --color-teal: #{color.get('theme/teal/base')};
        --color-blue: #{color.get('theme/blue/base')};
        --color-violet: #{color.get('theme/lavender/base')};
        --color-purple: #{color.get('theme/mauve/base')};
        --color-pink: #{color.get('theme/pink/base')};
        --color-brown: #{color.get('theme/flamingo/base')};
        --color-grey: #{color.get('elevation/9')};
        --color-black: #{color.get('elevation/1')};

        /* dark variants */
        --color-red-dark-1: #{color.get('theme/red/dark/12%')};
        --color-orange-dark-1: #{color.get('theme/peach/dark/12%')};
        --color-yellow-dark-1: #{color.get('theme/yellow/dark/12%')};
        --color-olive-dark-1: #{color.get('theme/green/dark/12%')};
        --color-green-dark-1: #{color.get('theme/green/dark/12%')};
        --color-teal-dark-1: #{color.get('theme/teal/dark/12%')};
        --color-blue-dark-1: #{color.get('theme/blue/dark/12%')};
        --color-violet-dark-1: #{color.get('theme/lavender/dark/12%')};
        --color-purple-dark-1: #{color.get('theme/mauve/dark/12%')};
        --color-pink-dark-1: #{color.get('theme/pink/dark/12%')};
        --color-brown-dark-1: #{color.get('theme/flamingo/dark/12%')};

        --color-red-dark-2: #{color.get('theme/red/dark/15%')};
        --color-orange-dark-2: #{color.get('theme/peach/dark/15%')};
        --color-yellow-dark-2: #{color.get('theme/yellow/dark/15%')};
        --color-olive-dark-2: #{color.get('theme/green/dark/15%')};
        --color-green-dark-2: #{color.get('theme/green/dark/15%')};
        --color-teal-dark-2: #{color.get('theme/teal/dark/15%')};
        --color-blue-dark-2: #{color.get('theme/blue/dark/15%')};
        --color-violet-dark-2: #{color.get('theme/lavender/dark/15%')};
        --color-purple-dark-2: #{color.get('theme/mauve/dark/15%')};
        --color-pink-dark-2: #{color.get('theme/pink/dark/15%')};
        --color-brown-dark-2: #{color.get('theme/flamingo/dark/15%')};

        /* light variants  */
        --color-red-light: #{color.get('theme/red/light/12%')};
        --color-orange-light: #{color.get('theme/peach/light/12%')};
        --color-yellow-light: #{color.get('theme/yellow/light/12%')};
        --color-olive-light: #{color.get('theme/green/light/12%')};
        --color-green-light: #{color.get('theme/green/light/12%')};
        --color-teal-light: #{color.get('theme/teal/light/12%')};
        --color-blue-light: #{color.get('theme/blue/light/12%')};
        --color-violet-light: #{color.get('theme/lavender/light/12%')};
        --color-purple-light: #{color.get('theme/mauve/light/12%')};
        --color-pink-light: #{color.get('theme/pink/light/12%')};
        --color-brown-light: #{color.get('theme/flamingo/light/12%')};
        --color-grey-light: #{color.get('elevation/11')};
        --color-black-light: #{if(
                is-dark,
                color.get('theme/black/light/12%'),
                color.get('theme/white/light/12%')
            )};

        /* other colors */
        --color-gold: #{color.get('theme/rosewater/base')};
        --color-white: #{color.get('text')};
        --color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
        --color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
        --color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
        --color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
        --color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
        --color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
        --color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
        --color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
        --color-diff-inactive: #{color.get('elevation/9')};
        --color-error-border: #{color.get('theme/red/base')};
        --color-error-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
        --color-error-bg-active: #{color.get('theme/red/light/6%')};
        --color-error-bg-hover: #{color.get('theme/red/light/12%')};
        --color-error-text: #{color.get('theme/red/base')};
        --color-success-border: #{color.get('theme/green/light/12%')};
        --color-success-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
        --color-success-text: #{color.get('text')};
        --color-warning-border: #{color.get('theme/yellow/light/12%')};
        --color-warning-bg: #{color.get('theme/yellow/base')};
        --color-warning-text: #{$lvl1};
        --color-info-border: #{color.get('theme/blue/light/12%')};
        --color-info-bg: #{$lvl1};
        --color-info-text: #{color.get('text')};
        --color-red-badge: #{color.get('theme/red/light/12%')};
        --color-red-badge-bg: #{$lvl1};
        --color-red-badge-hover-bg: #{color.get('theme/red/light/6%')};
        --color-green-badge: #{color.get('theme/green/base')};
        --color-green-badge-bg: #{$lvl1};
        --color-green-badge-hover-bg: #{color.get('theme/green/light/6%')};
        --color-yellow-badge: #{color.get('theme/yellow/base')};
        --color-yellow-badge-bg: #{$lvl1};
        --color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')};
        --color-orange-badge: #{color.get('theme/peach/base')};
        --color-orange-badge-bg: #{$lvl1};
        --color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')};
        --color-git: #{color.get('theme/peach/base')};
        --color-label-bg: #{color.get('primary/base')};

        /* target-based colors */
        --color-body: #{$lvl1};
        --color-box-header: #{rgba(color.get('elevation/2', 'rgb'), .8)};
        --color-box-body: transparent;
        --color-box-body-highlight: #{color.get('elevation/4')};
        --color-text-dark: #{color.get('elevation/10')};
        --color-text: #{color.get('text')};
        --color-text-light: #{color.get('elevation/12')};
        --color-text-light-1: #{color.get('elevation/11')};
        --color-text-light-2: #{color.get('elevation/10')};
        --color-text-light-3: #{color.get('elevation/9')};
        --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
        --color-timeline: #{color.get('elevation/4')};
        --color-input-text: #{color.get('text')};
        --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')};
        --color-header-wrapper: #{$lvl2};
        --color-header-wrapper-transparent: #00000000;
        --color-light: #{color.get('elevation/6')};
        --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.1);
        --color-active: rgba(#{color.get('text', 'rgb')}, 0.1);
        --color-menu: #{color.get('elevation/3')};
        --color-card: #{color.get('elevation/3')};
        --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
        --color-markup-code-block: rgba(#{color.get('text', 'rgb')}, 0.05);
        --color-button: #{color.get('elevation/4')};
        --color-code-bg: #{color.get('elevation/2')};
        --color-code-sidebar-bg: #{color.get('elevation/4')};
        --color-shadow: rgba(#{$lvl1-rgb}, 0.1);
        --color-secondary-bg: #{color.get('elevation/4')};
        --color-text-focus: #{color.get('text')};
        --color-expand-button: #{color.get('elevation/6')};
        --color-placeholder-text: #{color.get('elevation/6')};
        --color-editor-line-highlight: var(--color-primary-light-5);
        --color-project-board-bg: var(--color-secondary-light-2);
        --color-caret: var(--color-text);
        --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
        --color-reaction-active-bg: var(--color-primary-alpha-40);
        --color-nav-bg: #{$lvl2};
        --color-nav-hover-bg: #{color.get('elevation/6')};
        --color-label-active-bg: #{color.get('elevation/6')};
        --color-accent: var(--color-primary-light-1);
        --color-small-accent: var(--color-primary-light-5);
        --color-active-line: #{color.get('elevation/5')};
    }

    @if $is-dark {
        /* invert emojis that are hard to read otherwise */
        .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);
        }
    }

    .ui.ui.ui.button:not(.inverted, .basic),
    .ui.ui.ui.label:not(.inverted, .basic) {
        &.primary,
        &.green,
        &.red,
        &.teal {
            color: $lvl1;
            &:hover {
                color: $lvl3;
            }
        }
    }

    .ui.success.message, .ui.attached.success.message, .ui.positive.message, .ui.attached.positive.message {
        background: var(--color-success-bg);
        color: var(--color-success-text);
        border-color: var(--color-success-border);
    }

    .ui.grey.labels .label, .ui.ui.ui.grey.label {
        background-color: color.get('primary/base');
        border-color: color.get('primary/base');
        color: $lvl1;
        font-weight: 900;
    }   

    .ui.label, .ui.menu .item>.label {
        background: var(--color-label-bg);
        color: var(--color-label-text);
    }

    .ui.basic.modal {
        background-color: $lvl3;
    }

    .ui.error.message .header, .ui.negative.message .header, .ui.red.message .header {
        color: var(--color-error-text);
    }

    // link color for signed commits
    .ui.commit-header-row .svg.gitea-lock ~ a {
        color: $lvl1;
    }

    // most recent commit hover when signed
    .ui.sha.isSigned.isVerified:hover {
        .shortsha {
            color: $lvl1;
        }
        svg.gitea-lock {
            fill: $lvl1;
        }
    }

    // modal text color for the "Remove GPG Key" modal
    .ui.basic.modal,
    .ui.basic.modal > .header,
    .ui.inverted.button {
        color: color.get('text') !important;
    }

    ::selection {
        background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important;
    }

    body {
        font-size: var.get('base-font-size');
    }

    footer {
        justify-content: flex-end !important;

        .right-links {
            justify-content: space-around !important;
        }

        .right-links>a {
            border-left: none !important;
            padding-left: 0px !important;
            margin-left: 0px !important;
        }

        .ui.dropdown .menu {
            left: -50% !important;
            margin-bottom: 16px !important;
        }
    }

    @include chroma.make-chroma-styles;
    @include codemirror.make-code-mirror-styles;

    @include custom.apply-custom-styles;
}