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

@use '../../styles/variables' as var;
@use './_comment-inheritance';

.comment-styles :global {
  .page-comment-writer {
    @include bs.media-breakpoint-down(xs) {
      height: 3.5em;
    }
  }

  .page-comment {
    position: relative;
    pointer-events: none;

    scroll-margin-top: var.$grw-scroll-margin-top-in-view;

    // user name
    .page-comment-creator {
      margin-top: -0.5em;
      margin-bottom: 0.5em;
      font-weight: bold;
    }

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

    // comment section
    .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;
        }
      }

      pointer-events: auto;

      // delete button
      .page-comment-control {
        position: absolute;
        top: 0;
        right: 0;
        visibility: hidden;
      }

      &:hover > .page-comment-control {
        visibility: visible;
      }
    }

    // comment body
    .page-comment-body {
      margin-bottom: 0.5em;
      word-wrap: break-word;
    }

    // older comments
    &.page-comment-older {
    }
    // newer comments
    &.page-comment-newer {
      opacity: 0.7;

      &:hover {
        opacity: 1;
      }
    }

    .page-comment-meta {
      display: flex;
      justify-content: flex-end;

      font-size: 0.9em;
      color: bs.$gray-400;
    }

    .page-comment-revision svg {
      width: 16px;
      height: 16px;
    }
  }

  // TODO: Refacotr Soft-coding
  .page-comment-comment-body-skeleton {
    position: relative;
    height: 66px;
    padding: 1em;
    margin-left: 4.5em;
    @include bs.media-breakpoint-down(xs) {
      margin-left: 3.5em;
    }
  }
}