@import '../../../scss/styles.scss';
@import '../colors.scss';

@layer payload-default {
  .lexical-diff__diff-container {
    font-family: var(--font-serif);
    font-size: base(0.8);
    letter-spacing: 0.02em;

    // Apply background color to parents that have children with diffs
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    blockquote,
    h6 {
      &:has([data-match-type='create']) {
        background-color: var(--diff-create-parent-bg);
        color: var(--diff-create-parent-color);
      }

      &:has([data-match-type='delete']) {
        background-color: var(--diff-delete-parent-bg);
        color: var(--diff-delete-parent-color);
      }
    }

    li::marker {
      color: var(--theme-text);
    }

    [data-match-type='delete'] {
      color: var(--diff-delete-pill-color);
      text-decoration-color: var(--diff-delete-pill-color);
      text-decoration-line: line-through;
      background-color: var(--diff-delete-pill-bg);
      border-radius: 4px;
      text-decoration-thickness: 1px;
    }

    a[data-match-type='delete'] {
      color: var(--diff-delete-link-color);
    }

    a[data-match-type='create']:not(img) {
      // :not(img) required to increase specificity
      color: var(--diff-create-link-color);
    }

    [data-match-type='create']:not(img) {
      background-color: var(--diff-create-pill-bg);
      color: var(--diff-create-pill-color);
      border-radius: 4px;
    }

    .html-diff {
      &-create-inline-wrapper,
      &-delete-inline-wrapper {
        display: inline-flex;
      }

      &-create-block-wrapper,
      &-delete-block-wrapper {
        display: flex;
      }

      &-create-inline-wrapper,
      &-delete-inline-wrapper,
      &-create-block-wrapper,
      &-delete-block-wrapper {
        position: relative;
        align-items: center;
        flex-direction: row;

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          content: '';
        }
      }
    }
  }
}