:root {
    --header-container-height: 20px;
    --resource-column-width: 220px;
    --resource-list-icon-size: 16px;
    --resource-grid-icon-size: 16px;
    --pass-width: 26px;
    --pass-list-height: 180px;
    --pass-list-tilted-label-length: 200px;
    --pass-title-allowance-margin: 120px; /* used to reserve enough space so that rotated pass names stay visible */
    --pass-title-allowance-margin-with-scrollbar: 133px;
    --dependency-row-height: 30px;
    --dependency-block-height: 26px;
    --dependency-block-width: var(--pass-width);
    --hover-overlay-offset-top: 204px;
    --action-border-width: 13px;
    --action-border-height: var(--action-border-width);
    --action-width: 12px;
    --action-height: var(--action-width);

    --side-panel-width: 380px;
    --side-panel-pass-title-width: 330px; /* adjust if changing --side-panel-width */
    --side-panel-attachment-label-width: 298px; /* adjust if changing --side-panel-width */

    flex-grow: 1;
    flex-direction: column;
    min-width: 600px;
    background-color: var(--main-background-color);
}

#content-container {
    height: 100%;
    margin-left: 10px;
    flex-direction: row;
}

#main-container {
    flex-direction: column;
}

#panel-container {
    flex-direction: column;
    width: var(--side-panel-width);
    min-width: 280px;
    flex-shrink: 0;
    background-color: var(--side-panel-background-color);
}

/* Header */
#header-container {
    flex-direction: row;
    height: var(--header-container-height);
}
#header-container > VisualElement {
    flex-direction: row;
    height: var(--header-container-height);
    align-items: center;
}

#header-container-left {
    justify-content: flex-start;
    background-color: var(--unity-colors-toolbar-background);
}

#header-container-right {
    justify-content: flex-end;
    flex-grow: 1;
    background-color: var(--unity-colors-toolbar-background);
}

#search-field {
    max-width: 200px;
}

#header-container .unity-base-popup-field__label {
    min-width: auto;
}

#header-container PopupTextElement {
    flex-grow: 0;
}

#connection-dropdown {
    max-width: 250px;
    min-width: 80px;
    flex-grow: 0;
    flex-shrink: 1;
    height: var(--header-container-height);
    border-width: 0px 0px 0px 0px;
    min-width: 95px;
}

#auto-pause-toggle {
    padding: 3px 6px 3px 6px;
    flex-grow: 0;
    flex-shrink: 1;
    -unity-text-align: middle-center;
    min-width: 94px;
    height: var(--header-container-height);
}

#current-graph-dropdown {
    max-width: 200px;
    margin-left: 7px;
}

#current-execution-toolbar-menu {
    max-width: 300px;
    min-width: 114px;
    height: var(--header-container-height);
}

#pass-filter-field {
    height: var(--header-container-height);
    min-width: 86px;
}

#view-options-field {
    height: var(--header-container-height);
    min-width: 111px;
}

#resource-filter-field {
    height: var(--header-container-height);
    min-width: 111px;
}

#header-container DropdownField .unity-base-popup-field__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer */
#footer-container {
    flex-direction: row;
    height: var(--header-container-height);
    background-color: var(--unity-colors-toolbar-background);
}

#status-label {
    margin-left: 10px;
    align-self: center;
}

/* Passes */

#pass-list-scroll-view {
    min-height: var(--pass-list-height);
    flex-direction: column;
}

#pass-list {
    margin-left: var(--resource-column-width);
    flex-direction: row;
    height: var(--pass-list-height);
    align-items: flex-end;
    flex-shrink: 0;
    padding-right: var(--pass-title-allowance-margin-with-scrollbar);
}

#pass-list-scroll-view #unity-content-container {
    flex-direction: row;
}

#pass-list-width-helper {
    width: var(--pass-title-allowance-margin);
}

.pass-list__item {
    position: absolute;
    min-width: var(--pass-width);
    width: var(--pass-width);
    justify-content: center;
    flex-direction: column;
}

.pass-list__item .pass-title {
    width: var(--pass-list-tilted-label-length);
    top: -50px;
    left: -17px;
    rotate: -45deg;
    margin-bottom: 10px;
    height: var(--pass-width);
}

.pass-list__item .pass-block {
    margin-top: 2px;
    height: 15px;
    border-width: 0.5px; /* 1px width looks too wide for some reason? */
    border-radius: 2px;
    border-color: var(--pass-block-border-color);
}

.pass-block--culled {
    background-color: var(--pass-block-color--culled);
}

.pass-block--async {
    background-color: var(--pass-block-color--async);
}


.pass-list__item .pass-merge-indicator {
    background-color: var(--merged-pass-accent-color);
    height: 3px;
    margin-bottom: 1px;
    margin-top: 3px;
    visibility: hidden;
}

.pass-block.pass--highlight {
    background-color: var(--pass-block-color--highlight);
}

.pass-block.pass--highlight-border {
    border-color: var(--pass-block-color--highlight);
}

.pass-title.pass--highlight {
    color: var(--pass-block-text-color--highlight);
    -unity-font-style: bold;
}

.pass-title.pass--hover-highlight {
    color: var(--pass-block-text-color--highlight);
    -unity-font-style: bold;
}

.pass-block.pass-compatibility-message-indicator {
    background-color: var(--native-pass-accent-color);
    border-color: var(--pass-block-border-color);
}

.pass-block.pass-compatibility-message-indicator--anim {
    /* compatible pass animation transitions */
    transition-property: background-color;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
}

.pass-block.pass-compatibility-message-indicator--compatible {
    background-color: var(--native-pass-accent-compatible-color);
}

.pass-block.pass-synchronization-message-indicator {
    background-color: var(--pass-block-color--async);
}

.pass-block.pass-block-script-link {
    /*-unity-background-scale-mode:scale-to-fit;*/
    border-width: 2px;
    margin: -1px;
    padding: 0;
}

#pass-list-corner-occluder {
    position: absolute;
    min-width: var(--resource-column-width);
    min-height: var(--pass-list-height);
    background-color: var(--main-background-color);
}

/* Resource container */

#resource-container {
    flex-direction: row;
    margin-top: 5px;
    height: 100%;
}

#resource-container ScrollView {
    flex-grow: 1;
}

/* Grid lines */

#grid-line-container {
    position: absolute;
}

.grid-line {
    position: absolute;
    border-color: var(--grid-line-color);
    border-left-width: 2px;
    width: 0px;
    flex-grow: 1;
}

.grid-line--highlight {
    border-color: var(--grid-line-color--hover);
}

/* Resource list */

#resource-list-scroll-view {
    flex-direction: column;
    margin-top: 6px;
    width: var(--resource-column-width);
    min-width: var(--resource-column-width);
    max-width: var(--resource-column-width);
    margin-right: 0;
    margin-bottom: 12px;
}

.resource-list__item {
    height: var(--dependency-row-height);
    min-width: var(--resource-column-width);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.resource-list__item VisualElement {
    flex-direction: row;
}

.resource-list__item Label {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
}

.resource-list__item .resource-icon-container {
    align-items: center;
    flex-direction: row;
    margin-right: 6px;
    flex: none;
}

.resource-icon {
    width: var(--resource-list-icon-size);
    height: var(--resource-list-icon-size);
}

#resource-grid .resource-icon {
    width: var(--resource-grid-icon-size);
    height: var(--resource-grid-icon-size);
    margin-top: 5px;
    align-self: center;
}

.resource-list__item--highlight {
    -unity-font-style: bold;
    color: var(--pass-block-color--highlight);
}

/* Resource grid */

#resource-grid-scroll-view .unity-scroll-view__content-container {
    margin: 0px;
}

.resource-list-padding-item {
    height: 13px;
}

#resource-grid {
    flex-direction: column;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-right: var(--pass-title-allowance-margin);
}

#resource-grid-scroll-view.content-pan VisualElement {
    cursor: pan;
}

.resource-grid__row {
    height: var(--dependency-row-height);
    flex-direction: row;
}

.resource-helper-line {
    height: var(--dependency-row-height);
    flex-shrink: 0;
    -unity-background-image-tint-color: var(--resource-helper-line-color);
    background-image: url("../Icons/RenderGraphViewer/dash.png");
    background-repeat: repeat-x;
    background-size: 8px 8px;
    margin-top: 1px;
}

.resource-helper-line--highlight {
    -unity-background-image-tint-color: var(--resource-helper-line-color--hover);
}

.usage-range-block {
    margin-top: 2px;
    background-color: var(--usage-range-color);
    height: var(--dependency-block-height);
}

.usage-range-block--highlight {
    position: absolute;
    border-width: 1px;
    border-color: var(--pass-block-color--highlight);
    height: 27px;
    margin-top: 8px;
}

.dependency-block {
    position: absolute;
    margin-top: 2px;
    width: var(--dependency-block-width);
    min-width: var(--dependency-block-width);
    height: var(--dependency-block-height);
    background-color: var(--main-background-color);
}

.dependency-block-read {
    background-color: var(--resource-read-color);
}

.dependency-block-write {
    background-color: var(--resource-write-color);
}

.dependency-block-readwrite {
    /* foreground color is set in code when rendering the triangle */
    background-color: var(--resource-write-color);
}

#hover-overlay {
    /*display: none; /* for debugging */
    /*background-color: rgba(255, 0, 0, 0.2); /* for debugging */
    position: absolute;
}

#hover-overlay.content-pan {
    cursor: pan;
}

.resource-grid-focus-overlay {
    background-color: rgba(10, 10, 10, 0.2);
    position: absolute;
}

#empty-state-message {
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: center;
    -unity-text-align: middle-center;
}

#empty-state-message > TextElement {
    max-width: 260px;
}

/* Resource & pass list panel */

#panel-resource-list {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 18px;
    background-color: var(--side-panel-background-color);
    border-color: var(--side-panel-background-color);
}

#panel-resource-list-scroll-view {
    min-height: 30px;
}

#panel-pass-list {
    flex-grow: 0;
    flex-shrink: 1;
    min-height: 18px;
    border-bottom-width: 0;
    background-color: var(--side-panel-background-color);
}

#panel-pass-list-scroll-view {
    min-height: 30px;
}

#panel-container .header-foldout {
    margin: 0; /* Counteract built-in margins inside HeaderFoldout */
}

#panel-container .header-foldout > Toggle {
    padding: 0 0 0 8px; /* Counteract built-in margins inside HeaderFoldout */
}

#panel-container .header-foldout > #unity-content {
    margin: 0 5px 0 3px; /* Counteract built-in margins inside HeaderFoldout */
}

#empty-contents-message {
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: center;
    -unity-text-align: middle-center;
}

#panel-container .panel-list__item {
    margin-left: 6px;
    background-color: var(--side-panel-background-color);
    /* selection animation */
    transition-property: background-color;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
}

#panel-container .panel-list__item--selection-animation {
    background-color: var(--unity-colors-highlight-background-hover-lighter);
}

.panel-list__item .resource-icon-container {
    align-items: center;
    flex-direction: row;
    margin-right: 4px;
    flex: none;
}

.panel-list__item .resource-icon--imported {
    width: var(--resource-list-icon-size);
    height: var(--resource-list-icon-size);
}

.panel-list__item .resource-icon--global {
    width: var(--resource-list-icon-size);
    height: var(--resource-list-icon-size);
}

.panel-list__item > Label {
    -unity-font-style: normal;
    margin-top: 2px;
    color: var(--unity-colors-default-text);
}

.panel-list__item .unity-foldout__text {
    color: var(--unity-colors-default-text);
}

.panel-list__line-break {
    border-top-width: 2px;
    border-color: var(--side-panel-item-border-color);
    margin-left: -15px; /* counteract foldout indent */
    margin-top: 2px;
    margin-bottom: 4px;
}

ScrollView TextElement {
    margin-left: 4px;
}

.unity-foldout__text {
    color: var(--unity-colors-default-text);
}

.custom-foldout-arrow #unity-checkmark {
    background-image: resource("ArrowNavigationRight");
    width: 16px;
    height: 16px;
    rotate: 90deg;
}

.custom-foldout-arrow > Toggle > VisualElement:checked #unity-checkmark {
    rotate: 270deg;
    margin-top: 2px;
    flex-grow: 0;
    flex-shrink: 0;
}

.panel-search-field {
    margin-left: 6px;
    height: 16px;
    max-width: 350px;
    min-width: 200px;
    align-self: center;
}

/* Resource List panel only */

.panel-resource-list__item {
    margin-bottom: 6px;
    border-radius: 4px;
    border-width: 1px;
    border-color: var(--side-panel-item-border-color);
    margin-top: 4px;
    margin-right: 4px;
    padding-top: 4px;
    padding-bottom: 6px;
    -unity-font-style: bold;
}

.panel-resource-list__item .resource-icon {
    margin-top: 1px;
    margin-left: 2px;
    margin-right: 6px;
    flex-grow: 0;
    flex-shrink: 0;
}

.panel-resource-list__item > Toggle > VisualElement {
    max-width: 100%
}

.panel-resource-list__item > Toggle > VisualElement > Label {
    overflow: hidden;
    flex-shrink: 1;
    text-overflow: ellipsis;
}

/* Pass List panel only */

.panel-pass-list__item {
    margin-top: 2px;
}

.panel-pass-list__item > Toggle > VisualElement {
    max-width: 100%
}
.panel-pass-list__item > Toggle > VisualElement > Label {
    overflow: hidden;
    flex-shrink: 1;
    text-overflow: ellipsis;
}

.panel-pass-list__item .sub-header-text {
    margin-top: 6px;
    margin-bottom: 2px;
    -unity-font-style: bold;
}

.info-foldout {
    border-radius: 4px;
    border-width: 1px;
    border-color: var(--side-panel-item-border-color);
    margin-top: 6px;
    margin-left: 4px;
    margin-right: 4px;
    padding-top: 4px;
    padding-bottom: 6px;
}

.info-foldout > Toggle > VisualElement {
    max-width: 100%;
}

.info-foldout > Toggle > VisualElement > Label {
    margin-left: 6px;
    flex-shrink: 1;
    flex-grow: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-foldout > TextElement {
    -unity-font-style: normal;
    margin-right: 4px;
    margin-left: -6px;
    color: var(--unity-colors-default-text);
}

.info-foldout__secondary-text {
    margin-left: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--side-panel-secondary-text-color);
}

.panel-pass-list__item > #unity-content {
    margin-bottom: 12px;
}

.dependency-block-load-action {
    width: var(--action-width);
    height: var(--action-height);
    position: absolute;
    top: 0;
    left: 0;
}

.dependency-block-load-action-border {
    width: var(--action-border-width);
    height: var(--action-border-height);
    color: var(--load-action-border-color);
}

.dependency-block-store-action {
    width: var(--action-width);
    height: var(--action-height);
    position: absolute;
    rotate: 180deg;
    bottom: 0;
    right: 0;
}

.dependency-block-store-action-border {
    width: var(--action-border-width);
    height: var(--action-border-height);
    color: var(--store-action-border-color);
}