@import url("unity-theme://default");

/*
In Unity v6.1 UI Builder has a 'Variable' area that allows you to adjust
all settings defined as variables in a single location inspector.
 */
/* Style Values */
/*
In Unity v6.1 UI Builder has a 'Variable' area that allows you to adjust
all settings defined as variables in a single location inspector.
/* also remeber that these values are only fallbacks incase you do not define them in your settings file */
 */
/* Style Values */
:root {
    /* Parent Window Frame Container */
    --windowFrame-margin: 0;
    --windowFrame-padding: 0;
    --windowFrame-border-width: 1px;
    --windowFrame-border-radius: 5px;
    --windowFrame-min-width: 50px;
    --windowFrame-min-height: 50px;
    --windowFrame-border-color: rgba(0, 0, 0, 1);
    --windowFrame-background-color: rgba(56, 56, 56, 1);
    --windowFrame-color: rgba(255, 255, 255, 1);
    --windowFrame-icon-tint: rgba(255, 255, 255, 1);

    /* Header Area */
    --windowFrame-header-min-height: 25px;
    --windowFrame-header-background-color: rgba(0, 0, 0);

    /* Lock Indicator Icon */
    --windowFrame-lock-icon-size: 15px;
    --windowFrame-lock-icon-right: 14px;
    --windowFrame-lock-icon-top: 5px;
    --windowFrame-lock-icon-tint: var(--windowFrame-icon-tint);
    --windowFrame-lock-icon: resource('WindowFramework/Icons/locked-icon');

    /* Title Area */
    --windowFrame-title-padding: 5px;
    --windowFrame-title-font-size: 12px;
    --windowFrame-title-font-style: bold;
    --windowFrame-title-color: rgba(255, 255, 255, 1);

    /* Options Menu Icon */
    --windowFrame-options-menu-min-width: 20px;
    --windowFrame-options-menu-min-height: 20px;
    --windowFrame-options-menu-right: 0;
    --windowFrame-options-menu-top: 0;
    --windowFrame-options-menu-icon-tint: var(--windowFrame-icon-tint);
    --windowFrame-options-menu-icon: resource('WindowFramework/Icons/ellipse-icon');

    /* Content Area */
    --windowFrame-content-background-color: rgba(56, 56, 56, 1);
    --windowFrame-content-color: rgba(255, 255, 255, 1);
    --windowFrame-content-padding: 1px;

    /* Footer Area */
    --windowFrame-footer-font-size: 12px;
    --windowFrame-footer-min-height: 20px;
    --windowFrame-footer-color: rgba(255, 255, 255, 1);
    --windowFrame-footer-background-color: rgba(40, 40, 40, 1);

    /* Resize Area Icon*/
    --windowFrame-resize-area-margin: 2px;
    --windowFrame-resize-area-padding: 2px;
    --windowFrame-resize-area-size: 15px;
    --windowFrame-resize-area-bottom: 0;
    --windowFrame-resize-area-right: 0;
    --windowFrame-resize-icon-tint: var(--windowFrame-icon-tint);
    --windowFrame-resize-icon: resource('WindowFramework/Icons/resize-icon');

    /* Tooltip */
    --tooltip-background-color: rgba(0, 0, 0, 0.9);
    --tooltip-border-color: rgba(0, 0, 0);
    --tooltip-border-width: 1px;
    --tooltip-border-radius: 3px;
    --tooltip-font-size: 10px;
    --tooltip-color: rgba(255, 255, 255);
    --tooltip-padding: 3px;
    --tooltip-flex-direction: row;

    /* Context Menu */
    --context-menu-background-color: rgba(56, 56, 56, 1);
    --context-menu-color: rgba(255, 255, 255, 1);

    --context-menu-border-color: rgba(0, 0, 0, 1);
    --context-menu-border-radius: 0px;
    --context-menu-border-width: 1px;

    --context-menu-font-size: 10px;
    --context-menu-padding: 10px;
    --context-menu-margin: 3px;

}



/* Style Applications */
.windowFrame {
    width: var(--windowFrame-min-width);
    height: var(--windowFrame-min-height);
    border-color: var(--windowFrame-border-color);
    border-width: var(--windowFrame-border-width);
    border-radius: var(--windowFrame-border-radius);
    padding: var(--windowFrame-padding);
    margin: var(--windowFrame-margin);
    background-color: var(--windowFrame-background-color);
    min-width: var(--windowFrame-min-width);
    min-height: var(--windowFrame-min-height);
    color: var(--windowFrame-color);
}

.windowFrameLocked {
    display: flex;
    visibility: visible;
    top: var(--windowFrame-lock-icon-top);
    right: var(--windowFrame-lock-icon-right);
    width: var(--windowFrame-lock-icon-size);
    height: var(--windowFrame-lock-icon-size);
    background-image: var(--windowFrame-lock-icon);
    -unity-background-image-tint-color: var(--windowFrame-lock-icon-tint);
}
.windowFrameUnlocked {
    display: none;
    visibility: hidden;
}

#windowFrameHeader {
    text-overflow: ellipsis;
    -unity-text-align: middle-left;
    min-height: var(--windowFrame-header-min-height);
    background-color: var(--windowFrame-header-background-color);
    border-top-left-radius: var(--windowFrame-border-radius);
    border-top-right-radius: var(--windowFrame-border-radius);
}

#windowFrameTitle {
    padding-left: var(--windowFrame-title-padding);
    font-size: var(--windowFrame-title-font-size);
    -unity-font-style: var(--windowFrame-title-text-style);
}

/* Header Right - window context menu icon */
#windowFrameOptionsMenu {
    overflow: visible;
    visibility: visible;
    display: flex;
    align-content: center;
    justify-content: center;
    opacity: 1;
    margin-top: 2px;
    top: var(--windowFrame-options-menu-top);
    right: var(--windowFrame-options-menu-right);
    width: var(--windowFrame-options-menu-min-width);
    height: var(--windowFrame-options-menu-min-height);
    background-image: var(--windowFrame-options-menu-icon);
    -unity-background-image-tint-color: var(--windowFrame-options-menu-icon-tint);
}

/* Primary content container of a window frame */
#windowFrameContent {
    height: 100%;
    width: 100%;
    flex-grow: 1;
    padding-right: var(--windowFrame-content-padding);
    padding-left: var(--windowFrame-content-padding);
}

/* Main Footer Container */
#windowFrameFooter {
    background-color: var(--windowFrame-footer-background-color);
    min-height: var(--windowFrame-footer-min-height);
    border-bottom-left-radius: var(--windowFrame-border-radius);
    border-bottom-right-radius: var(--windowFrame-border-radius);
}

/* Footer Toolbar (Content) area */
#windowFrameFooterToolbar {

}

/* Resize Icon area in Footer */
#windowFrameResizeArea {
    bottom: var(--windowFrame-resize-area-bottom);
    right: var(--windowFrame-resize-area-right);
    width: var(--windowFrame-resize-area-size);
    height: var(--windowFrame-resize-area-size);
    background-image: var(--windowFrame-resize-icon);
    -unity-background-image-tint-color: var(--windowFrame-resize-icon-tint);
    margin-bottom: var(--windowFrame-resize-area-margin);
    margin-right: var(--windowFrame-resize-area-margin);
}

#ContextMenu {
    background-color: var(--context-menu-background-color);
    border-color: var(--context-menu-border-color);
    border-width: var(--context-menu-border-width);
}

#ContextMenu > Label {
    color: var(--context-menu-color);
    font-size: var(--context-menu-font-size);
    padding: var(--context-menu-padding);
    margin-bottom: var(--context-menu-margin);
}

#Tooltip {
    padding: var( --tooltip-padding);
    background-color: var( --tooltip-background-color);
    border-color: var( --tooltip-border-color);
    border-width: var( --tooltip-border-width);
    flex-direction: var( --tooltip-flex-direction);
}

#Tooltip > Label {
    color: var( --tooltip-color);
    font-size: var( --tooltip-font-size);
}