.comments-wrapper {
  @apply bg-lighter-gray pt-4;
  & .new-comment-wrapper {
    @apply  pt-4 text-zinc-800;
  }
  .comment-holder {
    @apply mb-4 pr-2;
    & textarea {
      @apply bg-white;
    }
  }
}

.comment-avatar-wrapper {
  & img { @apply w-6 h-6 sm:w-8 sm:h-8 md:w-9 md:h-9 sm:ml-2 rounded-full }
}

.comment {
  .comment-author a {
    @apply font-bold text-gray-800 no-underline hover:underline;
  }
  .comment-body {
    @apply prose prose-sm max-w-none;
  }
  .comment-links {
    @apply mt-2 text-sm text-gray-500 space-x-4;
    a {
      @apply text-gray-500 no-underline hover:underline cursor-pointer;
    }
  }
}

.comment-replies {
  @apply pl-6 ml-6 mt-6 border-l-2 border-gray-200 space-y-6;
}

.new-comment-form textarea {
  @apply w-full block border-gray-300 rounded-md shadow-sm;
  @apply focus:ring-blue-500 focus:border-blue-500;
}