.x-card-comment {
  @extend %x-card-inline,
          %x-card-hover-border;
  cursor: $cursor-default;

  .x-card-footer {
    @extend %pt-0;
  }
  .x-divider-horizontal {
    @extend %my-3;
  }

  .btn-link {
    @extend %pb-0,
            %pl-0;
  }
}


.x-card-footer-reply  {
  @extend %w-100;
}

.x-card-comments {
  @extend %mt-2;

  &-item {
    @extend %d-flex,
            %flex-row;

    .x-card-prepend {
      @extend %align-items-start,
              %position-relative,
              %mr-3;
    }

    &:not(:last-child) {

      .x-card-content {
        @extend %mb-3;
      }
      .x-card-prepend:before {
        @extend %position-absolute,
                %h-100,
                %d-block;
        content: '';
        width: 1px;
        left: 50%;
        top: 0;
        background-color: $border-color;
      }
    }
  }
}

.x-card-annotation {
  @extend %x-flex-a-center,
          %mb-2,
          %w-100,
          %overflow-hidden,
          %cursor-pointer;

  .x-note {
    max-width: calc(100% - 3rem);
    .x-text {
       @extend %text-truncate;
       max-width: 15.750rem;

      @media (min-width: 1367px) {
        max-width: 22rem;
      }
    }
  }
}

.x-comment-date {
  @extend %text-info,
          %font-size-xs;
}

.x-comment-name {
  @extend %text-default;
}

.x-comment-reply {
  @extend %h6;
}