.Element,
.SelectedElement {
  width: 100%;
  border-radius: 0.25em;
  position: relative;
  white-space: nowrap;
  line-height: var(--line-height-data);
  display: flex;
  align-items: center;
}
.Element:hover {
  background-color: var(--color-tree-node-hover);
}

.SelectedElement {
  background-color: var(--color-tree-node-selected);

  /* Invert colors */
  --color-component-name: var(--color-component-name-inverted);
  --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
  --color-attribute-name: var(--color-tree-node-hover);
  --color-attribute-value: var(--color-component-name-inverted);
}

.DollarR {
  color: var(--color-jsx-arrow-brackets);
}

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

.AttributeName {
  color: var(--color-attribute-name);
}

.AttributeValue {
  color: var(--color-attribute-value);
}

.Highlight {
  background-color: var(--color-search-match);
}
.CurrentHighlight {
  background-color: var(--color-search-match-current);
}
