.SelectedElement {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

.TitleRow {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  font-size: var(--font-size-monospace-large);
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem;
}

.SelectedComponentName {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Owners {
  padding: 0.25rem;
  border-top: 1px solid var(--color-border);
}

.Component,
.Owner {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-component-name);
}
.Component:before,
.Owner:before {
  white-space: nowrap;
  content: '<';
  color: var(--color-jsx-arrow-brackets);
}
.Component:after,
.Owner:after {
  white-space: nowrap;
  content: '>';
  color: var(--color-jsx-arrow-brackets);
}

.Component {
  flex: 1 1 auto;
}

.InspectedElement {
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-monospace-normal);
  line-height: var(--line-height-data);
}

.Owner {
  padding-left: 0.75rem;
  cursor: pointer;
}

.Loading {
  padding: 0.25rem;
  color: var(--color-dimmer);
  font-style: italic;
}
