.c-inspector {
    height: 100%;

    > [class*="__"] {
        min-height: 50px;

        + [class*="__"] {
            margin-top: $interiorMargin;
        }

        > .l-pane__contents {
            overflow: auto;

            > * {
                // Fend off scrollbar
                margin-right: $interiorMarginSm;
            }
        }
    }

    &__elements {
        height: 200px; // Initial height

        .tree-item {
            .t-object-label {
                // Elements pool is a flat list, so don't indent items.
                left: 0;
            }
        }
    }

    .c-color-swatch {
        $d: 12px;
        display: block;
        flex: 0 0 auto;
        width: $d;
        height: $d;
    }

    .c-tree {
        // When a tree is in the Inspector, remove scrolling and right pad
        overflow: visible;
        padding-right: 0;
    }

    /************************************************************** LEGACY */
    .l-inspector-part {
        display: contents;
    }

    h2 {
        @include propertiesHeader();
        font-size: 0.65rem;
        grid-column: 1 / 3;
    }

    .c-tree .grid-properties {
        margin-left: $treeItemIndent;
    }

    &__tabs {
        $h: 20px;
        @include abs();
        display: flex;
        flex-flow: column nowrap;

        > * + * {
            margin-top: $interiorMargin;
        }

        &__holder {
            display: flex;
            min-height: $h;

            &__header {

                &:before {
                    margin-right: $interiorMarginSm;
                    opacity: 0.7;
                }
            }
        }

        &__contents {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;

            &--hidden {
                height: 1000px;
                width: 1000px;
                position: absolute;
                left: -9999px;
                top: -9999px;
            }
        }
    }
}

.c-properties {
    display: grid;
    grid-row-gap: 0;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    min-width: 150px;

    [class*="header"] {
        @include propertiesHeader();

        &:not(:first-child) {
            // Allow multiple headers within a component
            margin-top: $interiorMarginLg;
        }
    }

    [class*="span-all"],
    [class*="header"] {
        grid-column: 1 / 3;
    }

    + .c-properties {
        margin-top: $interiorMarginLg;
    }

    &__section,
    &__row {
        display: contents;
    }

    &__row + &__row,
    &__section + &__section {
        [class*="__label"],
        [class*="__value"] {
            // Row borders, effected via border-top on child elements of the row
            border-top: 1px solid $colorInspectorSectionHeaderBg;
        }
    }

    &__header {
        font-size: .85em;
        text-transform: uppercase;
    }

    &__label,
    &__value {
        padding: 3px $interiorMarginLg 3px 0;
    }

    &__label {
        color: $colorInspectorPropName;

        &[title] {
            // When a cell has a title, assume it's helpful text
            cursor: help;
        }
    }

    &__value {
        color: $colorInspectorPropVal;
        word-break: break-all;
        &:first-child {
            // If there is no preceding .label element, make value span columns
            grid-column: 1 / 3;
        }
    }
}
/********************************************* LEGACY SUPPORT */
.c-inspector {
    // FilterField.vue
    .u-contents + .u-contents {
        li.grid-row > * {
            border-top: 1px solid $colorInspectorSectionHeaderBg;
        }
    }

    li.grid-row + li.grid-row {
        > * {
            border-top: 1px solid $colorInspectorSectionHeaderBg;
        }
    }

    li.grid-row .label {
        color: $colorInspectorPropName;
    }

    li.grid-row .value {
        color: $colorInspectorPropVal;
        word-break: break-all;
        &:first-child {
            // If there is no preceding .label element, make value span columns
            grid-column: 1 / 3;
        }
    }
}
