// import crowi variable
@import 'utilities';

.crowi.main-container {
  .page-comment-delete-modal .modal-content {
    .modal-body {
      .comment-body {
        background-color: #eee;
        padding: .5em;
        margin-top: .5em;
        border-radius: 4px;

        // scrollable
        overflow-y: auto;
        max-height: 13em;
      }
    }
  }
}

.crowi.main-container aside.sidebar .side-content {

.page-comments {
  margin: 8px 0 0 0;

  .page-comment-form {
    margin-top: 16px;

    .comment-form {
    }

    .comment-form-main {

      .comment-form-comment {
        height: 60px;
      }

      .comment-submit {
        margin-top: 8px;
        text-align: right;
      }
    }
  }

  .page-comments-list {
    .page-comment {
      margin-top: 8px;
      padding-top: 8px;
      border-top: solid 1px #ccc;

      .picture {
        float: left;
        width: 24px;
        height: 24px;
      }

      .page-comment-creator {
        font-weight: bold;
      }

      .page-comment-main {
        position: relative;
        margin-left: 40px;

        .page-comment-meta {
          color: #aaa;
          font-size: .9em;
        }
        .page-comment-body {
          padding: 8px 0;
          word-wrap: break-word;
        }
        .page-comment-control {
          position: absolute;
          display: none;    // default hidden
          top: 0;
          right: 0;

          a {
            padding: 3px;
          }
        }
      }

      // show controls when hover
      .page-comment-main:hover > .page-comment-control {
        display: block;
      }
    }

    .page-comment.page-comment-me {
      //color: lighten($crowiHeaderBackground, 65%);
      color: $crowiHeaderBackground;
      .page-comment-main {

        .page-comment-body,
        .page-comment-creator,
        .page-comment-meta {
        }

        .page-comment-meta {
          //background: lighten($crowiHeaderBackground, 65%);
        }
      }

    }

  }
}

} // .crowi.main-container aside.sidebar .side-content

.crowi.main-container {
  .page-comments {

    .page-comments-list-toggle-newer,
    .page-comments-list-toggle-older {
      text-align: center;
      display: block;
      margin: 8px;
      font-size: .9em;
      color: #999;
    }

    // older comments
    .page-comments-list-older .page-comment {
    }
    // newer comments
    .page-comments-list-newer .page-comment {
      opacity: .7;

      &:hover {
        opacity: 1;
      }
    }
  }
}