// Improvements to litegraph's css.
// Taken from ComfyUI.

:root {
	--litegraph-fg-color: #000;
	--litegraph-bg-color: #fff;
	--litegraph-comfy-menu-bg: #353535;
	--litegraph-comfy-input-bg: #222;
	--litegraph-input-text: #ddd;
	--litegraph-descrip-text: #999;
	--litegraph-drag-text: #ccc;
	--litegraph-error-text: #ff4444;
	--litegraph-border-color: #4e4e4e;
}

.litegraph {
    /* Input popup */
    &.graphdialog {
        min-height: 1em;
        background-color: var(--litegraph-comfy-menu-bg);
        .name {
            font-size: 14px;
            font-family: sans-serif;
            color: var(--litegraph-descrip-text);
        }
        button {
            margin-top: unset;
            vertical-align: unset;
            height: 1.6em;
            padding-right: 8px;
        }
    }
    .graphdialog input, .graphdialog textarea, .graphdialog select {
        background-color: var(--litegraph-comfy-input-bg);
        border: 2px solid;
        border-color: var(--litegraph-border-color);
        color: var(--litegraph-input-text);
        border-radius: 12px 0 0 12px;
    }

    /* Context Menu */
    .litemenu-entry {
        &.has_submenu {
            position: relative;
            padding-right: 20px;
        }
    }
    &.litecontextmenu {
        .litemenu-entry {
            &:hover {
                &:not(.disabled):not(.separator) {
                    background-color: var(--litegraph-comfy-menu-bg) !important;
                    filter: brightness(155%);
                    color: var(--litegraph-input-text);
                }
            }
        }
        input {
            background-color: var(--litegraph-comfy-input-bg) !important;
            color: var(--litegraph-input-text) !important;
        }
    }
    &.litesearchbox {
        z-index: 9999 !important;
        background-color: var(--litegraph-comfy-menu-bg) !important;
        overflow: hidden;
    }
    &.lite-search-item {
        color: var(--litegraph-input-text);
        background-color: var(--litegraph-comfy-input-bg);
        filter: brightness(80%);
        padding-left: 0.2em;
        &.generic_type {
            color: var(--litegraph-input-text);
            filter: brightness(50%);
        }
    }
}

.litemenu-entry {
    &.has_submenu {
        &::after {
            content: ">";
            position: absolute;
            top: 0;
            right: 2px;
        }
    }
}

.litegraph.litecontextmenu,
.litegraph.litecontextmenu.dark {
    z-index: 9999 !important;
    background-color: var(--litegraph-comfy-menu-bg) !important;
    filter: brightness(95%);
}

.litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
    background-color: var(--litegraph-comfy-menu-bg) !important;
    color: var(--litegraph-input-text);
}

.litegraph.litesearchbox input,
.litegraph.litesearchbox select {
    background-color: var(--litegraph-comfy-input-bg) !important;
    color: var(--litegraph-input-text);
}