.Element,
.SelectedElement {
  border-radius: 0.25em;
  white-space: nowrap;
  line-height: var(--line-height-data);
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
}
.Element:hover {
  background-color: var(--color-hover-background);
}

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

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