@use '../../../styles';
@use '../../../components/controls/EditableDivShared';
@use '../../../themes/defaults';

// TODO: also share most of the following styling with EditableDiv
.jse-value {
  display: inline-block;
  min-width: 2em;
  padding: 0 styles.$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

  &.jse-table-cell {
    overflow-wrap: normal;
    white-space: nowrap;
  }

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

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