.c-inspector {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    > * {
        // This is on purpose: want extra margin on top object-name element
        margin-top: $interiorMargin;
    }

    &__selected,
    &__multiple-selected {
        @include headerFont(1.1em);
        padding: $interiorMarginSm 0;
    }

    &__multiple-selected {
        $p: $interiorMarginLg;
        background: rgba($colorWarningLo, 0.3);
        border-radius: $basicCr;
        display: inline-block;
        font-style: italic;
        padding-left: $p;
        padding-right: $p;
    }

    &__selected {
        .c-object-label__name {
            filter: $objectLabelNameFilter;
        }

        .c-object-label__type-icon {
            opacity: $objectLabelTypeIconOpacity;
        }

        &--non-domain-object .c-object-label__name {
            font-style: italic;
        }
    }

    &__tabs {
        flex: 0 0 auto;
        font-size: 0.8em;
        text-transform: uppercase;
    }

    &__content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

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

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

    &__saved-styles {
        height: 300px;
    }

    .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;
    }

    .l-multipane {
        .l-pane {
            min-height: 50px;
        }
    }
}

.c-inspect-properties,
.c-inspect-styles {
    [class*="header"] {
        @include propertiesHeader();
        flex: 0 0 auto;
        font-size: .85em;
        text-transform: uppercase;

        &:not(:first-child) {
            // Allow multiple headers within a component
            margin-top: $interiorMarginLg;
        }
    }
}
/********************************************* INSPECTOR PROPERTIES TAB */
.c-inspect-properties {
    display: grid;
    grid-row-gap: $interiorMarginSm;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    min-width: 150px;

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

    + .c-inspect-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;
        }
    }

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

    &__label {
        color: $colorInspectorPropName;

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

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

/********************************************* INSPECTOR PROPERTIES TAB */
.c-saved-style {
    cursor: default;
}

/********************************************* 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;
        }
    }
}
