/****************************************************************
 *  General styles which apply to all SN clients
 *  Source: https://docs.standardnotes.org/extensions/themes/#creating-a-theme
****************************************************************/

:root {
    --primary-bg-color: rgb(45, 42, 46);
    --secondary-bg-color: rgb(34, 31, 34);
    --editor-bg-color: rgb(45, 42, 46);
    --border-color: #13131a;
    --ui-text-color: #939293;

    --sn-stylekit-info-color: #039be5;
    --sn-stylekit-info-contrast-color: var(--secondary-bg-color);

    --sn-stylekit-neutral-color: var(--ui-text-color);
    --sn-stylekit-neutral-contrast-color: var(--secondary-bg-color);

    --sn-stylekit-success-color: #a9dc76;
    --sn-stylekit-success-contrast-color: var(--secondary-bg-color);

    --sn-stylekit-warning-color: rgb(255, 216, 102);
    --sn-stylekit-warning-contrast-color: var(--secondary-bg-color);

    --sn-stylekit-danger-color: #ff6188;
    --sn-stylekit-danger-contrast-color: var(--secondary-bg-color);

    --sn-stylekit-grey-5: var(--sn-stylekit-info-color);
    --sn-desktop-titlebar-bg-color: var(--primary-bg-color);
    --sn-desktop-titlebar-border-color: var(--border-color);
    --sn-desktop-titlebar-ui-color: var(--ui-text-color);
    --sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color);

    // StyleKit Vars
    --sn-stylekit-shadow-color: rgb(25, 24, 26);

    --sn-stylekit-background-color: var(--editor-bg-color);
    --sn-stylekit-border-color: var(--border-color);
    --sn-stylekit-foreground-color: var(--ui-text-color);

    --sn-stylekit-contrast-background-color: var(--secondary-bg-color);
    --sn-stylekit-contrast-foreground-color: var(--ui-text-color);
    --sn-stylekit-contrast-border-color: var(--border-color);

    --sn-stylekit-secondary-background-color: var(--secondary-bg-color);
    --sn-stylekit-secondary-foreground-color: var(--ui-text-color);
    --sn-stylekit-secondary-border-color: var(--border-color);

    --sn-stylekit-secondary-contrast-background-color: var(--editor-bg-color);
    --sn-stylekit-secondary-contrast-foreground-color: var(--ui-text-color);
    --sn-stylekit-secondary-contrast-border-color: var(--border-color);

    --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
    --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);

    --sn-stylekit-paragraph-text-color: var(--ui-text-color);

    --sn-stylekit-scrollbar-track-border-color: var(--border-color);
    --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);

    --sn-stylekit-monospace-font: "Fira Code", "Ubuntu Mono", courier, monospace;
    --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont,
        "Fira Sans", "Roboto", "Ubuntu", "Droid Sans", "Helvetica Neue",
        sans-serif;

    --sn-stylekit-general-border-radius: 4px;
}

/****************************************************************
 *  Note editor styles
****************************************************************/

// Made the note editor title bar darker
#editor-title-bar {
    background-color: var(--secondary-bg-color) !important;
}

// Tailors menu item hovering to be consistent with note hovering
.sn-component .sk-menu-panel .sk-menu-panel-row:not(.selected):hover {
    background-color: #333035 !important;
}

/****************************************************************
 *  Tags column styles
****************************************************************/

// These two styles apply to the "+" button for tags. The "+" button for
// notes blend into the background, so for consistency, the same should apply
// to the tags "+" button.
.sn-component .sk-button.sk-secondary-contrast::before {
    background-color: var(--secondary-bg-color) !important;
}

.sn-component .sk-button.sk-secondary-contrast::after {
    color: var(--secondary-bg-color) !important;
}

/****************************************************************
 *  #notes-column styles
****************************************************************/

.note .selected, .note .selected svg {
    color: white;
}

// Darkend the #notes-column header
#notes-column #notes-title-bar,
.notes #notes-title-bar {
    background-color: var(--secondary-bg-color) !important;
}

// Search bar shouldn't be the same color as its background, this is necessary after
// darkening the #notes-column header
#search-bar {
    border: 1px solid var(--sn-stylekit-contrast-border-color);
    background-color: var(--editor-bg-color) !important;
}

// Hovering over notes in #notes-column results in a lighter background color for the hovered note
#notes-column .note,
.notes .note {
    &:not(.selected):hover {
        background-color: rgb(51, 48, 53) !important;
    }
}

/****************************************************************
 *  General Styles
****************************************************************/

#select {
    margin: 5px;
    color: var(--sn-stylekit-foreground-color);
    background-color: rgb(34, 31, 34);
    line-height: 1.3;
    border: 1px solid #13131a;
    border-radius: 4px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

pre {
    overflow: auto;
}