@import '../../../styles';
@import '../../../components/controls/EditableDivShared';

// TODO: also share most of the following styling with EditableDiv
.jse-value {
  min-width: 2em;
  padding: 0 $input-padding;
  box-sizing: border-box;
  outline: none;
  border-radius: 1px;
  vertical-align: top;

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

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

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

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