@use '@growi/core/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
    .picture {
      @extend %picture;
    }

  }
}


// adjust height
.comment-editor-styles :global {
  .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);
  }
}