@import url(./theme-next/shell.css);
@import url(./theme-next/settings.css);
@import url(./theme-next/notes/text.css);

@font-face {
    font-family: "Noto Sans";
    src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
}

@font-face {
    font-family: "Ubuntu Sans";
    src: url(../fonts/Ubuntu_Sans/UbuntuSans-VariableFont_wdth\,wght.ttf);
}

@font-face {
    font-family: "Nunito";
    src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
}

@font-face {
    font-family: "Inter";
    src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
}

:root {
    /* --main-font-family: "Noto Sans", sans-serif; */
    --main-font-family: "Segoe UI", sans-serif;
    /* --main-font-family: "Ubuntu", sans-serif; */
    /* --main-font-family: "Nunito", sans-serif; */
    /* --main-font-family: "Inter", sans-serif; */

    --main-font-size: normal;

    --tree-font-family: var(--main-font-family);
    --tree-font-size: normal;

    --detail-font-family: var(--main-font-family);
    --detail-font-size: normal;

    --monospace-font-family: JetBrainsLight;
    --monospace-font-size: normal;

    --left-pane-item-selected-shadow-size: 2px;

    --launcher-pane-size: 58px;
    --launcher-pane-horizontal-size: 54px;
    --launcher-pane-horizontal-icon-size: 20px;    
    --launcher-pane-button-margin: 6px;
    --launcher-pane-button-gap: 3px;

    --tab-bar-height: 50px;
    --tab-height: 36px;
    --tab-first-item-horiz-offset: 1px;
    --new-tab-button-size: 24px;

    --center-pane-border-radius: 10px;

    --menu-padding-size: 8px;
    --menu-item-icon-vert-offset: 0;    

    --more-accented-background-color: var(--card-background-hover-color);

    --timeline-left-gap: 20px;
    --timeline-right-gap: 20px;
    --timeline-bullet-size: 10px;
    --timeline-bullet-vertical-pos: .75em;
    --timeline-connector-size: 4px;

    /* Theme capabilities */
    --tab-note-icons: true;
}

/*
 * THEME COLORS
 */

/* 
 * Light theme scheme
 */
:root {
   --theme-style: light;

   --main-background-color: white;
   --main-text-color: black;
   --main-border-color: #dbdbdb;
   --subtle-border-color: rgba(0, 0, 0, 0.1);
   --dropdown-border-color: #ccc;
   --dropdown-shadow-opacity: .2;
   --dropdown-item-icon-destructive-color: #ec5138;
   --disabled-tooltip-icon-color: #004382;

   --accented-background-color: #f5f5f5;   

   --button-background-color: transparent;
   --button-border-color: #ddd;
   --button-text-color: black;
   --button-border-radius: 5px;
   --button-disabled-background-color: #ddd;
   --button-disabled-text-color: black;

   --primary-button-background-color: #6c757d;
   --primary-button-text-color: white;
   --primary-button-border-color: #6c757d;

   --muted-text-color: #666;

   --input-text-color: black;
   --input-background-color: transparent;

   --hover-item-text-color: black;
   --hover-item-background-color: #0000001a;
   --hover-item-border-color: transparent;

   --active-item-text-color: var(--left-pane-text-color);
   --active-item-background-color: #ddd;
   --active-item-border-color: transparent;

   --menu-text-color: #272727;
   --menu-background-color: #ffffffd9;
   --menu-item-icon-color: #727272;
   --menu-item-disabled-opacity: .5;
   --menu-item-keyboard-shortcut-color: #666666a8;
   --menu-item-arrow-color: #00000080;
   --menu-item-delimiter-color: #00000030;

   --modal-background-color: white;
   --modal-backdrop-color: black;

   --quick-search-background: #00000012;
   --quick-search-color: #06060682;
   --quick-search-hover-background: #00000020;
   --quick-search-focus-border: #00000029;
   --quick-search-focus-background: #ffffff80;
   --quick-search-focus-color: #000;

   --left-pane-collapsed-border-color: #0000000d;
   --left-pane-background-color: #f2f2f2;
   --left-pane-text-color: #383838;
   --left-pane-item-hover-background: #eaeaea;
   --left-pane-item-selected-background: white;
   --left-pane-item-selected-color: black;
   --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
   --left-pane-item-action-button-background: #d7d7d7;
   --left-pane-item-action-button-color: inherit;
   --left-pane-item-action-button-hover-background: white;
   --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
   --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);

   --launcher-pane-background-color: #e8e8e8;
   --launcher-pane-horizontal-background-color: #fafafa;
   --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1);
   --launcher-pane-text-color: #000000bd;
   --launcher-pane-button-hover-color: black;
   --launcher-pane-button-hover-background: white;
   --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);

   --protected-session-active-icon-color: #16b516;
   --sync-status-error-pulse-color: #ff5528;

   --root-background: var(--left-pane-background-color);

   --gutter-color: transparent;
   --gutter-hover-color: #bfbfbf;

   --tab-close-button-hover-background: #c95a5a;
   --tab-close-button-hover-color: white;

   --active-tab-background-color: white;
   --active-tab-hover-background-color: var(--active-tab-background-color);
   --active-tab-text-color: black;
   --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .1), -1px -1px 3px rgba(0, 0, 0, .05);
   --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .1);

   --inactive-tab-background-color: transparent;
   --inactive-tab-hover-background-color: #00000016;
   --inactive-tab-text-color: #4e4e4e;

   --new-tab-button-background: #d8d8d8;
   --new-tab-button-color: #3a3a3a;
   --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
   --new-tab-button-hover-background: white;
   --new-tab-button-hover-color: black;

   --right-pane-item-hover-background: #ececec;
   --right-pane-item-hover-color: inherit;

   --scrollbar-border-color: #ddd;
   --scrollbar-background-color: #ddd;
   --link-color: blue;

   --mermaid-theme: default;   

   --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);

   --card-background-color: var(--accented-background-color);
   --card-background-hover-color: #f9f9f9;
   --card-background-press-color: #efefef;
   --card-border-color: #eaeaea;
   --card-shadow-color: rgba(0, 0, 0, 0.1);
   --card-box-shadow: 0 0 12px var(--card-shadow-color);

   --calendar-color: var(--menu-text-color);
   --calendar-weekday-labels-color: var(--muted-text-color);
   --calendar-day-hover-color: var(--hover-item-text-color);
   --calendar-day-hover-background: var(--active-item-background-color);
   --calendar-day-highlight-background: #80808024;

   --timeline-bullet-color: #a5a5a5;
   --timeline-bullet-hover-color: black;
   --timeline-connector-color: #f1f1f1;
   --timeline-connector-active-color: #ddd;

   --tooltip-background-color: rgba(255, 255, 255, 0.85);
   --tooltip-foreground-color: #000000ba;
   --tooltip-shadow-color: rgba(0, 0, 0, .15);
}

/* 
 * Dark color scheme
 */

@media (prefers-color-scheme: dark) {
    :root {
        --theme-style: dark;        
    
        --main-background-color: #333;
        --main-text-color: #ccc;        
        --main-border-color: #454545;
        --subtle-border-color: #313131;
        --dropdown-border-color: #292929;
        --dropdown-shadow-opacity: .6;
        --dropdown-item-icon-destructive-color: #de6e5b;
        --disabled-tooltip-icon-color: #7fd2ef;
    
    
        --accented-background-color: #555;
    
        --button-background-color: transparent;
        --button-border-color: #ccc;
        --button-text-color: currentColor;
        --button-border-radius: 5px;
        --button-disabled-background-color: transparent;
        --button-disabled-text-color: #999;
    
        --primary-button-background-color: #888;
        --primary-button-text-color: white;
        --primary-button-border-color: #999;
    
        --muted-text-color: #bbb;
    
        --input-text-color: #ccc;
        --input-background-color: #333;
    
        --hover-item-text-color: #efefef;
        --hover-item-background-color: #ffffff24;
        --hover-item-border-color: transparent;
    
        --active-item-text-color: var(--left-pane-text-color);
        --active-item-background-color: #777;
        --active-item-border-color: transparent;

        --new-tab-button-background: #fff0;
        --new-tab-button-color: #ffffff96;
        --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
        --new-tab-button-hover-background: #fff3;
        --new-tab-button-hover-color: white;
    
        --menu-text-color: #e3e3e3;
        --menu-background-color: #222222d9;
        --menu-item-icon-color: #8c8c8c;
        --menu-item-disabled-opacity: .5;
        --menu-item-keyboard-shortcut-color: #ffffff8f;
        --menu-item-arrow-color: #ffffffa3;
        --menu-item-delimiter-color: #ffffff1c;


        --modal-background-color: #333;
        --modal-backdrop-color: #444;

        --quick-search-background: #ffffff12;
        --quick-search-color: #ffffff52;
        --quick-search-hover-background: #ffffff1f;
        --quick-search-focus-border: #80808095;
        --quick-search-focus-background: #ffffff1f;
        --quick-search-focus-color: white;
    
        --left-pane-collapsed-border-color: #0009;
        --left-pane-background-color: #1f1f1f;
        --left-pane-text-color: #AAAAAA;
        --left-pane-item-hover-background: #ffffff0d;
        --left-pane-item-selected-background: #ffffff25;
        --left-pane-item-selected-color: #dfdfdf;
        --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
        --left-pane-item-action-button-background: #ffffff73;
        --left-pane-item-action-button-color: black;
        --left-pane-item-action-button-hover-background: #ffffffad;
        --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
        --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
     
        --launcher-pane-background-color: #1a1a1a;
        --launcher-pane-horizontal-background-color: #282828;
        --launcher-pane-horizontal-border-color: rgb(22, 22, 22);
        --launcher-pane-text-color: #909090;
        --launcher-pane-button-hover-color: #ffffff;
        --launcher-pane-button-hover-background: #ffffff1c;
        --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);

        --protected-session-active-icon-color: #8edd8e;
        --sync-status-error-pulse-color: #f47871;

        --root-background: var(--left-pane-background-color);

        --gutter-color: transparent;
        --gutter-hover-color: #626262;

        --tab-close-button-hover-background: #a45353;
        --tab-close-button-hover-color: white;

        --active-tab-background-color: #ffffff1c;
        --active-tab-hover-background-color: var(--active-tab-background-color);
        --active-tab-text-color: #ffffffcd;
        --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .2), -1px -1px 3px rgba(0, 0, 0, .4);
        --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .4);
    
        --inactive-tab-background-color: transparent;
        --inactive-tab-hover-background-color: #ffffff0f;
        --inactive-tab-text-color: #7c7c7c;

        --right-pane-item-hover-background: #ffffff26;
        --right-pane-item-hover-color: white;
    
        --scrollbar-border-color: #666;
        --scrollbar-background-color: #333;
        --link-color: lightskyblue;

        --mermaid-theme: dark;

        --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);

        --card-background-color: #363636;
        --card-background-hover-color: #3c3c3c;
        --card-background-press-color: #464646;
        --card-border-color: #222222;
        --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);

        --calendar-color: var(--menu-text-color);
        --calendar-weekday-labels-color: var(--muted-text-color);
        --calendar-day-hover-color: var(--hover-item-text-color);
        --calendar-day-hover-background: var(--active-item-background-color);
        --calendar-day-highlight-background: #8080805a;

        --timeline-bullet-color: gray;
        --timeline-bullet-hover-color: white;
        --timeline-connector-color: #464646;
        --timeline-connector-active-color: #545454;

        --tooltip-background-color: rgba(67, 67, 67, 0.86);
        --tooltip-foreground-color: #ffffffeb;
        --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
    }
    
    body ::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
    
    body .CodeMirror {
        filter: invert(90%) hue-rotate(180deg);
    }
    
    .excalidraw.theme--dark {
        --theme-filter: invert(80%) hue-rotate(180deg) !important;
    }
    
    body .todo-list input[type="checkbox"]:not(:checked):before {
        border-color: var(--muted-text-color) !important;
    }
    
    .btn-close {
        filter: invert(1);
    }
}