styles.module.scss

@import "styles/include";

// we use viewer mode to show editor when it's "disabled"
.editor-viewer {
    > div:first-child {
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 16px 25px 0px 25px;
      height: 280px;
      overflow-y: auto;
      background: #fafafb;
    }
}
.editor-container {
  :global {
    // reset style for heading list in  headings selection popup
    .tui-popup-body {
      h1,h2,h3,h4,h4,h5,h6 {
        font-weight: revert;
        line-height: revert;
      }
    }

    // reset border color
    .tui-editor-defaultUI {
      border: 1px solid #aaaaab;
      border-radius: 4px;
      overflow: hidden;
      &:focus-within:not(.error) {
        border-color: #55a5ff;
        box-shadow: 0 0 2px 1px #cee6ff;
      }
    }

    .te-toolbar-section {
      border-bottom: 1px solid #aaaaab;
      height: 40px;
    }

    .tui-editor-defaultUI-toolbar {
      margin-top: (40px - 32px) / 2; // center buttons inside the toolbar
    }

    // hide uplodd file
    .tui-editor-popup{
        box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.26);
    }

    .te-popup-add-image .te-tab button, .te-popup-add-image .te-file-type{
      display: none !important;
    }

    .te-popup-add-image .te-url-type{
      display: block !important;
    }
  }
}

.message {
  @include font-roboto;

  width: 100%;
  text-align: center;
  min-height: 40px;
  line-height: 20px;
  padding: 9px 10px;
  margin: 10px 0 5px;
  font-size: 14px;
  color: #ff5b52;
  border: 1px solid #ffd5d1;
  cursor: auto;
  outline: none;
}