@use '../../../styles';
@use '../../../themes/defaults';

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

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

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

    &::after {
      pointer-events: none;
      color: defaults.$tag-background;
      content: 'key';
    }
  }
}