@use '@growi/core-styles/scss/bootstrap/init' as bs;
@use 'styles/variables' as var;
@use './comment-inheritance';

.comment-styles {

  :global(.page-comment) {
    position: relative;
    pointer-events: none;
    scroll-margin-top: var.$grw-scroll-margin-top-in-view;

    // background
    :global(.bg-comment) {
      @extend %bg-comment;
    }

    // user icon
    :global(.user-picture) {
      @extend %user-picture;
    }

    // comment section
    :global(.page-comment-main) {
      @extend %comment-section;

      pointer-events: auto;

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

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

    // comment body
    :global(.page-comment-body) {
      word-wrap: break-word;
      :global(.wiki) {
        p {
          margin: 8px 0;
        }
        blockquote {
          margin: 24px 0 8px;
          &:first-child {
            margin-top: 0;
          }
        }
      }
    }

    // older comments
    // &.page-comment-older {
    // }

    // newer comments
    &:global(.page-comment-newer) {
      opacity: 0.7;

      &:hover {
        opacity: 1;
      }
    }

    :global(.page-comment-revision) {
      :global(.material-symbols-outlined) {
        font-size: 16px;
        vertical-align: middle;
      }
    }


    :global(.page-comment-meta) {
      display: flex;
      justify-content: flex-end;
      font-size: 0.9em;
      color: bs.$gray-400;
    }

  }

  // TODO: Refacotr Soft-coding
  :global(.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;
    }
  }
}

// // Light mode color
@include bs.color-mode(light) {
  .comment-styles {
    :global(.page-comment-revision) {
      color: bs.$gray-500;
    }
  }
}

// // Dark mode color
@include bs.color-mode(dark) {
  .comment-styles {
    :global(.page-comment-revision) {
      color: bs.$gray-600;
    }
  }
}