.page-render-elements {
  display: flex;
  flex-flow: wrap;

  .line-break {
    width: 100%;
    margin: 2px 0;
    background-color: transparent;
    border: none;

    + .line-break {
      margin: var(--spacing-100) 0;
    }
  }

  .line-break-number {
    position: relative;
    left: calc(-1 * var(--spacing-150));
    top: var(--spacing-075);
    font-size: 0.7em;
  }

  .mark {
    font-family: "Georgia", serif;
    cursor: pointer;
    @include body-xmedium-1;
    display: inline-flex;
    height: var(--spacing-300);
    padding: 0 var(--spacing-050);
    margin-bottom: var(--spacing-050);
    width: auto;
    background-color: var(--layer-semantic-info);
    line-height: var(--spacing-300);

    &.selected {
      background-color: var(--layer-semantic-info);
      color: var(--text-primary);
    }
  }

  .token {
    font-family: "Georgia", serif;
    cursor: pointer;
    @include body-xmedium-1;
    display: inline-flex;
    align-items: center;
    height: var(--spacing-300);
    line-height: var(--spacing-300);
    min-height: 0;
    padding: 0 var(--spacing-050);
    margin-bottom: var(--spacing-050);
    width: auto;

    sup {
      font-size: var(--spacing-150);
      line-height: 0;
      vertical-align: super;
      margin-bottom: var(--spacing-100);
    }

    &.highlight {
      background-color: var(--layer-semantic-warning);
    }

    &.edited {
      border-bottom: 1px dashed var(--text-on-color-accent);
    }

    &.review {
      background-color: color-mix(
        in srgb,
        var(--semantic-danger-70) 50%,
        transparent
      );
    }

    &.inconsistency {
      border-bottom: 2px dashed var(--semantic-danger-70);
    }

    &.ignore {
      opacity: 0.6;
    }

    &.comment {
      border-bottom: 2px dashed var(--semantic-success-60);
    }

    &.selected {
      background-color: var(--layer-semantic-danger);
      color: var(--text-primary);
    }

    &.participant {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
  }

  .participant {
    margin-right: var(--spacing-100);
    border-radius: var(--radius-200);
    padding: 0 var(--spacing-100);
    background-color: var(--layer-hover-2);
    border: 1px dashed var(--text-placeholder);
    cursor: pointer;
    height: var(--spacing-300);
  }
}