@use '@growi/core/scss/bootstrap/init' as bs;

%comment-section {
  position: relative;
  padding: 1em;

  // speech balloon
  &:before {
    position: absolute;
    top: 1.5em;
    left: -1em;
    display: block;
    width: 0;
    content: '';
    border: 1em solid transparent;
    border-left-width: 0;

    @include bs.media-breakpoint-down(xs) {
      top: 1em;
    }
  }
}

%picture {
  width: 1.2em;
  height: 1.2em;
}

$codemirror-default-height: 300px;

// // Light mode color
@include bs.color-mode(light) {
  %bg-comment {
    background-color: rgba( bs.$gray-200, 0.5 );
    border: 1px solid bs.$gray-200;
    backdrop-filter: blur(10px);
  }
}

// // Dark mode color
@include bs.color-mode(dark) {
  %bg-comment {
    background-color: rgba( bs.$gray-800, 0.3 );
    border: 1px solid bs.$gray-700;
    backdrop-filter: blur(10px);
  }
}