/* == Comments == */
.wojo.comments {
   margin: 1.5rem 0;
}
.wojo.comments .comment {
   display: flex;
   flex-flow: column;
   align-items: flex-start;
   position: relative;
   background-image: none;
   margin: 2rem 0 0;
   padding-left: 2rem;
}
.wojo.comments .comment::before {
   position: absolute;
   left: 0;
   top: 0;
   content: "";
   width: .1rem;
   height: 100%;
   border: .1rem solid var(--grey-color-300);
}
.wojo.comments .comment:first-child {
   margin-top: 0;
}
.wojo.comments .comment .comments {
   margin: 0 0 .5rem .5rem;
   padding: 1rem 0 1rem 1rem;
}
/* == Avatar == */
.wojo.comments .comment .avatar {
   flex: 0 0 auto;
   max-width: none;
   white-space: nowrap;
   width: 2.5rem;
}
.wojo.comments .comment img.avatar,
.wojo.comments .comment .avatar img {
   display: block;
   margin: 0 auto;
   width: 100%;
   height: 100%;
   border-radius: 50%;
}
/* == Content == */
.wojo.comments .comment > .content {
   flex: 0 1 100%;
   width: 100%;
   max-width: 100%;
}
.wojo.comments .comment > .avatar ~ .content {
   margin-top: 1rem;
}
.wojo.comments .comment .author {
   font-size: 1rem;
   font-weight: 500;
}
.wojo.comments .comment a.author {
   cursor: pointer;
}
.wojo.comments .comment a.author:hover {
   color: var(--primary-color-hover);
}
.wojo.comments .comment .metadata {
   display: inline-block;
   margin-left: .5rem;
   font-size: .875rem;
   vertical-align: middle
}
.wojo.comments .comment .metadata a.delete {
   margin-left: 1rem;
   vertical-align: middle
}
.wojo.comments .comment .metadata > * {
   display: inline-block;
   margin: 0 .5rem 0 0;
}
.wojo.comments .comment .metadata > :last-child {
   margin-right: 0;
}
.wojo.comments .comment .text:not(.wojo) {
   margin: .25rem 0 .5rem;
   font-size: 1rem;
   word-wrap: break-word;
   line-height: 1.3;
}
.wojo.comments .comment .actions {
   font-size: .750rem;
   margin-top: 0
}
.wojo.comments .comment .actions a {
   cursor: pointer;
   font-weight: 600;
   font-size: .875rem;
}
.wojo.comments .comment .actions a:last-child {
   margin-right: 0;
}
.wojo.comments .comment .actions a.active,
.wojo.comments .comment .actions a:hover {
   color: var(--dark-color);
}
/* == Variations == */
.wojo.threaded.comments .comment .comments {
   margin-left: .5rem;
}