/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

@import './rich-text-editor-icons.css';
@import './plugins/CodeActionMenuPlugin/index.css';
@import './plugins/DraggableBlockPlugin/index.css';
@import './plugins/TableActionMenuPlugin/index.css';
@import './plugins/ToolbarPlugin/index.css';

.c-rich-text-editor {
  margin: 0px auto;
  position: relative;
  line-height: 1.7;

  > * {
    box-sizing: border-box;
  }

  @apply !font-sans font-normal text-gray-900-50;

  .c-rte-editor-scroller {
    min-height: var(--c-rte-min-height, 150px);
    border: 0;
    resize: none;
    cursor: text;
    display: block;
    position: relative;
    outline: 0;
    resize: vertical;
  }

  .c-rte-editor-container {
    @apply relative mt-2 cursor-text rounded-bl-md rounded-br-md;
  }

  .c-rte-editor {
    @apply relative;
  }

  .c-rte-table-action-dropdown {
    display: absolute;
    right: 2px;
    top: 2px;
  }

  [contenteditable] {
    pre {
      line-height: 1.1;
      color: #fff;
      margin: 0;
      padding: 10px;
      overflow: auto;
      max-height: 180px;
      @apply bg-purple-50-900 text-sm;

      &::-webkit-scrollbar {
        background: transparent;
        width: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background: #999;
      }
    }

    hr {
      padding: 4px 0;
      border: 1px solid red;
      border: none;
      margin: 1em 0;
      cursor: pointer;

      &:after {
        content: '';
        display: block;
        height: 1px;
        background-color: #ccc;
        line-height: 1px;
        @apply bg-purple-100-800;
      }

      &.selected {
        outline: 2px solid rgb(60, 132, 244);
        user-select: none;
      }
    }
  }

  [role='separator'] {
    @apply h-px bg-gray-200-700;
  }

  .ltr {
    text-align: left;
  }

  .rtl {
    text-align: right;
  }

  button.item i {
    opacity: 0.6;
  }

  .TableNode__contentEditable {
    min-height: 20px;
    border: 0px;
    resize: none;
    min-height: 100%;
    cursor: text;
    display: block;
    position: relative;
    tab-size: 1;
    outline: 0px;
    padding: 0;
    user-select: text;
    font-size: 15px;
    white-space: pre-wrap;
    word-break: break-word;
    z-index: 3;
  }

  .TableNode__contentEditable .CrystallizeRTEditorTheme__paragraph {
    @apply my-2;
  }

  .CrystallizeRTEditorTheme__blockCursor {
    display: block;
    pointer-events: none;
    position: absolute;
  }

  .CrystallizeRTEditorTheme__blockCursor:after {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid black;
    animation: CursorBlink 1.1s steps(2, start) infinite;
  }

  .c-rte-placeholder {
    @apply pointer-events-none absolute right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal text-gray-300-600;
    font-style: italic;
    left: var(--c-rte-content-pl, 1.5rem);
  }

  @keyframes CursorBlink {
    to {
      visibility: hidden;
    }
  }
}

.c-rte-contenteditable-root {
  @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
  tab-size: 1;
  padding-bottom: 8px;
  min-height: calc(var(--c-rte-min-height, 150px) - 8px);

  /* Allow for customization from the outside */
  padding-top: var(--c-rte-content-pt, 0);
  padding-left: var(--c-rte-content-pl, 1.5rem);
  padding-right: var(--c-rte-content-pr, 1.5rem);
  padding-bottom: var(--c-rte-content-pb, 8px);

  &[contenteditable='false'] {
    @apply bg-transparent;
  }
}
