lila/ui/bits/css/_markdown-toastui.scss

@use '../node_modules/@toast-ui/editor/dist/toastui-editor.css';
@use '../node_modules/@toast-ui/editor/dist/theme/toastui-editor-dark.css';

.markdown-toastui {
  height: 60vh;

  .tab-item {
    background: $c-bg-box;

    &.active {
      @extend %metal;
    }
  }

  .toastui-editor {
    &-defaultUI {
      @extend %base-font;

      border: none;

      &-toolbar {
        @extend %metal;

        border-radius: $box-radius-size $box-radius-size 0 0 !important;
        border: $border;
        flex-flow: row wrap;
      }
    }

    &-toolbar {
      height: auto;

      &-icons {
        border-color: $c-border;

        &:not(:disabled) {
          background-color: $c-bg-zebra;

          &:hover {
            background-color: $c-bg-box;
          }
        }
      }
    }

    &-toolbar-group button {
      margin: 6px 3px;
    }

    &-dropdown {
      &-toolbar {
        display: flex;
        flex-flow: column;
        border: 0;

        .toastui-editor {
          &-toolbar {
            &-group {
              border-radius: 2px;
              box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
              background-color: #f7f9fc;
            }
          }
        }
      }
    }

    &-md-tab-container {
      display: none;
    }

    &-tabs {
      @extend %flex-center;

      align-content: flex-end;
      margin: 0 1ch 0 0;

      .tab-item {
        height: 2em;
        line-height: 2em;
        margin: 0 0 -1px 0;

        /* preview is not accurate to what lichess shows */
        display: none;
      }
    }

    &-popup {
      @extend %box-radius;

      border: $border;
      background-color: $c-bg-page;
      margin-left: 0;

      @include if-light {
        background-color: $c-bg;
      }

      button {
        text-align: center;
      }
    }

    &-ok-button {
      background-color: $c-primary !important;
    }

    &-ww-container,
    &-md-container {
      @extend %box-radius-bottom;

      border: $border;
      border-top: 0;
    }

    &.ww-mode,
    &.md-mode,
    &-md-preview {
      @extend %base-font;

      font-size: 1rem;
      background: $c-bg-input;
      color: $c-font;
    }

    &-contents {
      font-size: 1rem;

      & p,
      & h2,
      & h3,
      & h4 {
        color: $c-font;
      }

      & h2 {
        border-color: $c-brag;
      }

      & h3 {
        border: none;
      }
    }

    .ProseMirror {
      font-size: 1rem;
      padding: 0.8em 1.2em;
    }

    &-mode-switch {
      background: none;
      border: none;
    }

    &-popup-body {
      li[data-type='Heading'] {
        &[data-level='1'],
        &[data-level='5'],
        &[data-level='6'] {
          display: none;
        }
      }

      input {
        width: 100%;
        border: $border;
        border-radius: $box-radius-size !important;
      }
    }
  }
}

.toastui-editor-popup-add-image {
  padding-top: 20px;

  &::before {
    padding-inline: 20px;
    content: 'Drag an edge to resize your image.';
  }
}