.comment{
  font-size:1em;
  width:100%;
  word-wrap:break-word;
  border-radius:.625rem;
  margin-bottom:10px;
  padding:1rem;
}

.comment__data{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.comment__header{
  font-family:var(--font-medium);
  font-size:16px;
}
@media screen and (min-width:768px){
  .comment__header{
    font-size:18px;
  }
}
@media screen and (min-width:1200px){
  .comment__header{
    font-size:22px;
  }
}

.comment_question{
  border:1px solid #e0eaf7;
}

.comment_answer{
  background-color:#f4f8fd;
}

.comment__avatar{
  border:0;
  border-radius:50%;
  height:40px;
  position:relative;
  width:40px;
}

.comment__avatar-symbol{
  font-size:32px;
}

.comment__created{
  color:#eee;
  font-weight:500;
  margin-left:1rem;
}

.comment__text{
  font-size:14px;
}
@media screen and (min-width:768px){
  .comment__text{
    font-size:16px;
  }
}
@media screen and (min-width:1200px){
  .comment__text{
    font-size:18px;
  }
}

.comment__like-button{
  background:url(../assets/images/like.svg) 0 0 no-repeat;
  cursor:pointer;
  height:24px;
  width:26px;
}

.comment__like{
  display:flex;
}

.comment__like-count{
  margin-left:12px;
}

.comment__like_active{
  background:url(../assets/images/like_active.svg) 0 0 no-repeat;
  color:#0d111c;
}

.comment_unpublished{
  background:#f5f5f5;
}

.comment__create-answer-button{
  cursor:pointer;
  font-size:1rem;
}

.comment__button-action{
  background:#15a8f1;
  border:0;
  border-radius:.625rem;
  color:#fff;
  cursor:pointer;
  font-size:12px;
  font-style:normal;
  font-weight:400;
  line-height:16px;
  margin:16px 5px 16px 0;
  padding:8px 16px;
  text-align:center;
}
.comment__button-action:hover{
  background:#0497e0;
}

.comment__button-action_delete{
  background:#e33f1e;
  cursor:pointer;
}
.comment__button-action_delete:hover{
  background:#e33f1e;
}

.comment_deleted{
  opacity:.3;
}