@use '@growi/core-styles/scss/bootstrap/init' as bs;
@use './comment-inheritance';
@use '../PageEditor/page-editor-inheritance';

// display cheatsheet for comment form only
.comment-editor-styles :global {
  .comment-form {
    position: relative;

    // background
    .bg-comment {
      @extend %bg-comment
    }

    // user icon
    .user-picture {
      @extend %user-picture;
    }

  }
}


// adjust height
.comment-editor-styles :global {
  // Set `display: flex` instead of `display: block` to make it work with `flex: 1` of the children
  // This helps users focus on the editor by clicking on the broader area
  .tab-pane.active {
    display: flex;
  }

  .cm-editor {
    min-height: comment-inheritance.$codemirror-default-height !important;
    max-height: #{2 * comment-inheritance.$codemirror-default-height};
  }
  .cm-gutters {
    min-height: comment-inheritance.$codemirror-default-height !important;
  }
  .comment-preview-container {
    min-height: page-editor-inheritance.$navbar-editor-height + comment-inheritance.$codemirror-default-height;
    padding-top: 0.5em;
  }
}

// border-radius
.comment-editor-styles :global {
  .cm-editor, .cm-scroller {
    border-radius: var(--bs-border-radius);
  }
}

// remove outline
.comment-editor-styles :global {
  .cm-editor {
    outline: none;
  }
}