@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
    .bg-comment {
      @extend %bg-comment;
    }

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

    // comment section
    .page-comment-main {
      @extend %comment-section;

      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 {
      word-wrap: break-word;
      .wiki p {
        margin: 8px 0;
      }
    }

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

      &:hover {
        opacity: 1;
      }
    }

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


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

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

  }

  // 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;
    }
  }
}

// // 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;
    }
  }
}