@use '../../styles/bootstrap/init' as bs;

$bgcolor-global: white;

%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 {
  float: left;
  width: 3em;
  height: 3em;
  margin-top: 0.8em;

  @include bs.media-breakpoint-down(xs) {
    width: 2em;
    height: 2em;
  }
}

.page-comment :global {
  position: relative;
  padding-top: 70px;
  margin-top: -70px;

  // ユーザー名
  .page-comment-creator {
    margin-top: -0.5em;
    margin-bottom: 0.5em;
    font-weight: bold;
  }

  // ユーザーアイコン
  .picture {
    @extend %picture;
  }

  // コメントセクション
  .page-comment-main {
    @extend %comment-section;
    @include bs.media-breakpoint-up(sm) {
      margin-left: 4.5em;
    }
    @include bs.media-breakpoint-down(xs) {
      &:before {
        content: none;
      }
    }


    /*
      * GROWI comment form
    */
    background-color: $bgcolor-global;

    &:before {
      border-right-color: $bgcolor-global;
    }

    .nav.nav-tabs {
      > li > a.active {
        background: transparent;
        border-bottom: solid 1px darken($bgcolor-global, 4%);
        border-bottom-color: darken($bgcolor-global, 4%);
      }
    }
  }

  // コメント本文
  .page-comment-body {
    margin-bottom: 0.5em;
    word-wrap: break-word;
  }
}