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

@layer payload-default {
  .rich-text-lexical {
    & > .field-error.tooltip {
      right: auto;
      position: static;
      margin-bottom: 0.2em;
      max-width: fit-content;
    }

    .errorBoundary {
      pre {
        text-wrap: unset;
      }
    }

    &__wrap {
      width: 100%;
      position: relative;
    }

    &--read-only {
      .editor-container {
        .editor {
          @keyframes fadeInBackground {
            from {
              background-color: transparent;
            }
            to {
              background-color: var(--theme-elevation-100);
            }
          }

          animation: fadeInBackground 0.5s ease forwards;
          color: var(--theme-elevation-450);
        }
      }
    }
  }
}
