.comment-item {
   padding: 20px 15px;
   margin-bottom: 10px;
   background: $body-bg-alt;

   form,
   .alert {
      margin-top: $spacer;
   }
}

.comment-item-level-0 {
   padding: 10px 0;
   background: $body-bg;
   border-bottom: 1px solid $border-color;
}

.comment-answers {
   .show-answers {
      display: inline-block;
      color: $text-dark;
      margin-bottom: 15px;

      .hide {
         display: none;
      }

      &.active {
         .hide {
            display: inline;
         }

         .show {
            display: none;
         }
      }
   }
}

.comment-answers-0 {
   > div {
      border-left: 1px solid $border-color;
      padding-left: 20px;
   }
}

.comment-info {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: $spacer;

   * {
      margin: 0;
   }

   div {
      display: flex;
      align-items: center;
   }

   a {
      @include underline-default;

      color: $text-dark;
      margin-right: 20px;
   }

   .date {
      color: $text-muted;
   }

   .comment-report {
      a {
         text-transform: lowercase;
         color: $text-muted;
      }
   }
}

.comment-text {
   margin: 0;
}

.comment-reaction {
   display: block;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-style: italic;
   color: $text-muted;
}
