:root {
    --hierarchy-background-colour: var(--indi-light-transparent);
    --hierarchy-foreground-colour: var(--indi-light-text-colour);
    --hierarchy-background-hover: var(--indi-light-colour);
    --hierarchy-header-background: var(--indi-primary-colour);
    --hierarchy-header-foreground: var(--indi-primary-text-colour);
    --hierarchy-hover-colour: var(--indi-primary-colour);
}

.indi-hierarchy {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    flex-grow: 1;
    background-color: var(--hierarchy-background-colour);
    color: var(--hierarchy-foreground-colour);
    height: 0; /* Must force a concrete height (this acts like a min-height and flex-grow will expand it) otherwise scroll on .hierarchy-body breaks */

    transition: background-color 0.5s ease;
}

.indi-hierarchy:hover {
    background-color: var(--hierarchy-background-hover);
}

.hierarchy-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 36px;
    border: none;
    padding: 6px;
    background-color: var(--hierarchy-header-background);
    color: var(--hierarchy-header-foreground);
}

.hierarchy-body {
    display: flex;
    flex-flow: column nowrap;
    overflow: auto;
    flex: 1;
}

.hierarchy-item-container {
    flex-shrink: 0; /* Don't shrink vertically, maintain size and force parent to render a vertical scroll bar */
}

/*noinspection CssUnresolvedCustomProperty*/
.hierarchy-item-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px calc(var(--depth) * 16px + 4px);
    position: relative;
}

.indi-hierarchy .indi-button {
    padding: 2px 4px;
    width: 20px;
    height: 20px;
    border: none;
}

.indi-hierarchy .indi-button:hover:not(:disabled) {
    background-color: var(--hierarchy-hover-colour);
    color: var(--indi-primary-text-colour);
}

/* Asset name buttons, not supposed to really look like buttons, but are clickable to select the asset */
.indi-hierarchy .indi-button.hierarchy-item {
    color: var(--hierarchy-foreground-colour);
    background-color: transparent;
    text-align: left;
    height: auto;
    width: 100%;
}