@import "gradio";
@import "litegraph";

body {
    overflow: hidden;

    // Disable pull to refresh
    overscroll-behavior-y: contain;

    background: var(--body-background-fill);

    width: 100%;
    height: 100%;
    margin: 0px;
    font-family: Arial;
}

:root {
    --color-blue-500: #3985f5;

    --input-border-color-focus: var(--neutral-400);

    --comfy-accent-soft: var(--neutral-300);
    --comfy-widget-selected-background-fill: var(--color-yellow-100);
    --comfy-widget-hovered-background-fill: var(--secondary-200);
    --comfy-container-selected-background-fill: var(--color-yellow-300);
    --comfy-container-hovered-background-fill: var(--secondary-300);
    --comfy-container-empty-background-fill: var(--color-grey-300);
    --comfy-container-empty-border-color: var(--color-grey-400);
    --comfy-disabled-label-color: var(--neutral-400);
    --comfy-disabled-textbox-background-fill: var(--neutral-200);
    --comfy-disabled-textbox-border-color: var(--neutral-300);
    --comfy-disabled-textbox-text-color: var(--neutral-500);
    --comfy-splitpanes-background-fill: var(--secondary-100);
    --comfy-splitpanes-background-fill-hover: var(--secondary-300);
    --comfy-splitpanes-background-fill-active: var(--secondary-400);
    --comfy-dropdown-list-background: white;
    --comfy-dropdown-item-color-hover: white;
    --comfy-dropdown-item-background-hover: var(--neutral-400);
    --comfy-dropdown-item-color-active: var(--neutral-100);
    --comfy-dropdown-item-background-active: var(--secondary-600);
    --comfy-progress-bar-background: var(--neutral-300);
    --comfy-progress-bar-foreground: var(--secondary-300);
    --comfy-node-name-background: var(--color-blue-200);
    --comfy-node-name-foreground: var(--body-text-color);
    --comfy-spinner-main-color: var(--neutral-400);
    --comfy-spinner-accent-color: var(--secondary-500);
}

.dark {
    color-scheme: dark;

    --input-border-color-focus: var(--neutral-500);

    --comfy-accent-soft: var(--neutral-600);
    --comfy-widget-selected-background-fill: var(--primary-500);
    --comfy-widget-hovered-background-fill: var(--neutral-600);
    --comfy-container-selected-background-fill: var(--primary-700);
    --comfy-container-hovered-background-fill: var(--neutral-500);
    --comfy-container-empty-background-fill: var(--color-grey-800);
    --comfy-container-empty-border-color: var(--color-grey-600);
    --comfy-disabled-label-color: var(--neutral-500);
    --comfy-disabled-textbox-background-fill: var(--neutral-800);
    --comfy-disabled-textbox-border-color: var(--neutral-700);
    --comfy-disabled-textbox-text-color: var(--neutral-500);
    --comfy-splitpanes-background-fill: var(--panel-border-color);
    --comfy-splitpanes-background-fill-hover: var(--secondary-500);
    --comfy-splitpanes-background-fill-active: var(--secondary-300);
    --comfy-dropdown-list-background: var(--neutral-800);
    --comfy-dropdown-item-color-hover: var(--neutral-400);
    --comfy-dropdown-item-background-hover: var(--neutral-600);
    --comfy-dropdown-item-background-active: var(--secondary-600);
    --comfy-dropdown-border-color: var(--neutral-600);
    --comfy-progress-bar-background: var(--neutral-500);
    --comfy-progress-bar-foreground: var(--secondary-400);
    --comfy-node-name-background: var(--neutral-700);
    --comfy-node-name-foreground: var(--body-text-color);
    --comfy-spinner-main-color: var(--neutral-600);
    --comfy-spinner-accent-color: var(--secondary-600);

    --f7-navbar-color: var(--body-text-color);
    --f7-navbar-bg-color: var(--neutral-800);
}

@mixin square-button {
     border: 1px solid var(--panel-border-color);
     font-weight: bold;
     text-align: center;
     margin: auto;

     &.primary {
         background: var(--button-primary-background-fill);
         &:hover:not(:disabled) {
             background: var(--button-primary-background-fill-hover);
         }
     }

     &.secondary {
         background: var(--button-secondary-background-fill);
         &:hover:not(:disabled) {
             background: var(--button-secondary-background-fill-hover);
         }
     }

     &.ternary {
         background: var(--panel-background-fill);
         &:hover:not(:disabled) {
             background: var(--block-background-fill);
         }
         &.selected {
             background: var(--panel-background-fill);
         }
     }

     &:hover:not(:disabled) {
         filter: brightness(85%);
     }
     &:active:not(:disabled) {
         filter: brightness(50%)
     }
     &.selected {
         color: var(--body-text-color);
         filter: none;
     }

     &:disabled:not(.selected) {
         background: var(--neutral-700);
         color: var(--neutral-400);
         opacity: 50%;
     }
}

@mixin disable-input {
    -webkit-text-fill-color: var(--comfy-disabled-textbox-text-color);
    background-color: var(--comfy-disabled-textbox-background-fill);
    border-color: var(--comfy-disabled-textbox-border-color);
    box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
    cursor: not-allowed;
    color: var(--comfy-disabled-label-color);
}

@mixin disable-inputs {
    :global(input[type=text]:disabled) {
        @include disable-input;
    }
    :global(textarea:disabled) {
        @include disable-input;
    }
    :global(label:has(input:disabled) > span) {
        color: var(--comfy-disabled-label-color);
    }
    :global(label:has(textarea:disabled) > span) {
        color: var(--comfy-disabled-label-color);
    }
}

@mixin json-view {
    --jsonPaddingLeft: 1rem;
    --jsonBorderLeft: 1px dotted var(--neutral-600);
    --jsonBracketColor: currentcolor;
    --jsonBracketHoverBackground: var(--primary-200);
    --jsonSeparatorColor: currentcolor;
    --jsonKeyColor: var(--body-text-color);
    --jsonValColor: var(--body-text-color-subdued);
    --jsonValStringColor: var(--color-green-500);
    --jsonValNumberColor: var(--color-blue-500);
    --jsonValBooleanColor: var(--color-red-500);
    --jsonCollapsedColor: var(--neutral-100);
    --jsonCollapsedBackground: var(--primary-400);

    font-family: monospace;
}

hr {
    color: var(--panel-border-color);
}

input {
    color: var(--body-text-color);
    background: var(--input-background-fill);
    border: var(--input-border-width) solid var(--input-border-color)
}

input:not(input[type=radio]), textarea {
    border-radius: 0 !important;
}

:not(.litegraph) {
    select {
        color: var(--body-text-color);
        background: var(--input-background-fill);
        border: var(--input-border-width) solid var(--input-border-color)
    }
}

.container {
    background: var(--body-background-fill) !important;
    &.selected {
        background: var(--ae-primary-color) !important;
        > .block.padded {
            background: var(--ae-primary-color) !important;
        }
    }
    > .block {
        background: var(--body-background-fill) !important;
        // border-radius: var(--ae-panel-border-radius) !important;
    }
    &.z-index0 {
        > .block {
            background: var(--panel-background-fill) !important;
        }
    }

    // &:not(.edit) {
    //     &.z-index1 > .block {
    //         padding: calc(var(--ae-outside-gap-size) / 2) !important;
    //         border-width: 0px !important;
    //     }

    //     > .block {
    //         border: solid var(--ae-panel-border-width) var(--ae-panel-border-color) !important;
    //     }
    // }
}

button {
    &.primary:active {
        border-color: var(--button-primary-border-color-active) !important;
        background: var(--button-primary-background-fill-active) !important;
        color: var(--button-primary-text-color-active) !important;
    }
    &.secondary:active {
        border-color: var(--button-secondary-border-color-active) !important;
        background: var(--button-secondary-background-fill-active) !important;
        color: var(--button-secondary-text-color-active) !important;
    }
}

.widget {
    // padding: var(--ae-outside-gap-size);
    // border: 1px solid var(--ae-panel-border-color);
    .block {
        // background: var(--ae-frame-bg-color) !important;
        background: var(--block-background-fill) !important;
    }

}

// fixes drop item shadow not appearing when dragging template items onto workflow
:global([data-is-dnd-shadow-item]) {
    min-height: 5rem;
}

:global(.dark .photo-browser-popup) {
    background: var(--neutral-700);
}

:global(.dark .photo-browser-popup-) {
    background: var(--neutral-700);
}

:global(.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs) {
    transform: translate3d(0, calc(var(--f7-toolbar-height) * 2), 0);
}