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

$lexical-contenteditable-top-padding: 8px;
$lexical-contenteditable-bottom-padding: 8px;

@layer payload-default {
  .ContentEditable__root {
    border: 0;
    display: block;
    position: relative;
    tab-size: 1;
    outline: 0;
    padding-top: $lexical-contenteditable-top-padding;
    padding-bottom: $lexical-contenteditable-bottom-padding;
    padding-left: 0;
    padding-right: 0;

    &:focus-visible {
      outline: none !important;
    }

    & > * {
      transition: transform 0.2s ease-in-out;
      // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
    }
  }

  .rich-text-lexical--show-gutter
    > .rich-text-lexical__wrap
    > .editor-container
    > .editor-scroller
    > .editor {
    > .ContentEditable__root {
      padding-left: 3rem;
    }
    > .ContentEditable__root::before {
      content: ' ';
      position: absolute;
      top: $lexical-contenteditable-top-padding;
      left: 0;
      height: calc(
        100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
      );
      border-left: 1px solid var(--theme-elevation-100);
    }
  }

  html[data-theme='light'] {
    .rich-text-lexical.rich-text-lexical--show-gutter {
      &.error:not(:hover) {
        > .rich-text-lexical__wrap
          > .editor-container
          > .editor-scroller
          > .editor
          > .ContentEditable__root::before {
          border-left: 2px solid var(--theme-error-400);
        }
      }

      &.error:hover {
        > .rich-text-lexical__wrap
          > .editor-container
          > .editor-scroller
          > .editor
          > .ContentEditable__root::before {
          border-left: 2px solid var(--theme-error-500);
        }
      }
    }
  }

  html[data-theme='dark'] {
    .rich-text-lexical.rich-text-lexical--show-gutter {
      &.error {
        > .rich-text-lexical__wrap
          > .editor-container
          > .editor-scroller
          > .editor
          > .ContentEditable__root::before {
          border-left: 2px solid var(--theme-error-500);
        }
      }
    }
  }
}
