.c-inspector {
  display: flex;
  flex: 1 1 auto;
  gap: $interiorMarginSm;
  flex-direction: column;
  overflow: hidden;

  &__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__type-icon {
      opacity: $objectLabelTypeIconOpacity;
    }

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

  &__tabs {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;

    &.c-tabs {
      flex-wrap: nowrap;
    }

    .c-tab {
      background: $colorTabBg;
      color: $colorTabFg;
      padding: $interiorMargin;

      &:not(.is-current) {
        overflow: hidden;

        &:after {
          background-image: linear-gradient(90deg, transparent 0%, rgba($colorTabBg, 1) 70%);
          content: '';
          display: block;
          position: absolute;
          right: 0;
          height: 100%;
          width: 15px;
          z-index: 1;
        }
      }

      &.is-current {
        background: $colorTabCurrentBg;
        color: $colorTabCurrentFg;
        padding-right: $interiorMargin + 3;
      }

      &__name {
        overflow: hidden;
      }
    }
  }

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

  &__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;
  }

  textarea {
    // When a textarea is in the Inspector, only allow vertical resize
    resize: vertical;
  }

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

  h2 {
    @include propertiesHeader();
    font-size: 0.65rem;
    grid-column: 1 / 3;
    margin: $interiorMargin 0;

    &.--first {
      margin-top: 0;
    }
  }

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

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

.c-inspect-properties,
.c-inspect-tags {
  [class*='header'] {
    @include propertiesHeader();
    flex: 0 0 auto;
    //font-size: 0.85em;
  }
}

.c-inspect-properties,
.c-inspect-styles {
  [class*='header'] {
    @include propertiesHeader();
    flex: 0 0 auto;
    font-size: 11px;
    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 $colorInteriorBorder;
    }
  }

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

  &__label,
  &__hint {
    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;
    }
    .hint {
      color: $colorBodyFg
    }
  }
}

.is-editing {
  .c-inspect-properties {
    &__value,
    &__label {
      line-height: 160%; // Prevent buttons/selects from overlapping when wrapping
    }
  }
  .grid-row--pad-label-for-button {
    // Add extra space at the top of the label grid cell because there's a button to the right
    [class*='label'] {
      line-height: 1.8em;
    }
  }

  .c-location {
    // Always make the location element 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;
    }
  }

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

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

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