@import '../../../styles';

.jse-key {
  display: inline-block;
  min-width: 2em;
  padding: 0 $input-padding;
  box-sizing: border-box;
  outline: none;
  border-radius: 1px;
  vertical-align: top;
  color: var(--jse-key-color);

  word-break: normal;
  overflow-wrap: normal; // not anywhere as for JSONValue
  white-space: pre-wrap; // important for rendering multiple consecutive spaces

  &:hover {
    background: var(--jse-hover-background-color);
  }

  &:hover {
    background: var(--jse-hover-background-color);
  }

  &.jse-empty {
    min-width: 3em;
    outline: 1px dotted var(--jse-tag-background);
    -moz-outline-radius: 2px;

    &::after {
      pointer-events: none;
      color: var(--jse-tag-background);
      content: 'key';
    }
  }
}