/* Feature comment block. Rendered as an inner block of camup/feature-section. */

.feature-comment {
  color: var(--color-white);
}

.feature-comment__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2px;
}

.feature-comment__avatar {
  width: 34px;
  height: 34px;
  margin-right: 9px;
  border-radius: 50%;
  object-fit: cover;
}

.feature-comment__author {
  display: flex;
  align-items: center;
  padding-top: 2.5px;
}

.feature-comment__name {
  margin-right: 15px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 1;
}

.feature-comment__meta {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--color-white-64);
  font-size: 13px;
  line-height: 1;
}

.feature-comment__meta span + span::before {
  margin-right: 13px;
  content: '•';
}

.feature-comment__body {
  display: flex;
  margin-left: 38px;
}

.feature-comment__image {
  width: 51px;
  height: 80px;
  margin-right: 15px;
  border-radius: 2.78px;
  object-fit: cover;
}

.feature-comment__content {
  padding-top: 4px;
}

.feature-comment__text {
  margin-bottom: 12px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 1;
}

.feature-comment__actions {
  display: flex;
  align-items: center;
  gap: 21px;
  color: var(--color-white-64);
  font-size: 13px;
  line-height: 1;
}

.feature-comment__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.feature-comment__action--like::before,
.feature-comment__action--chat::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background-color: var(--color-white);
}

.feature-comment__action--like::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99939 12.2641L7.07106 13.868C7.33837 14.1353 7.93983 14.269 8.3408 14.269H10.8803C11.6822 14.269 12.551 13.6675 12.7515 12.8656L14.3553 7.98712C14.6895 7.05152 14.088 6.24959 13.0856 6.24959H10.4125C10.0115 6.24959 9.67736 5.91544 9.74419 5.44765L10.0783 3.30915C10.212 2.70769 9.81101 2.03941 9.20956 1.83893C8.67494 1.63844 8.00665 1.90576 7.73934 2.30673L4.99939 6.38324' stroke='%23000' stroke-width='1.00242' stroke-miterlimit='10'/%3E%3Cpath d='M1.59167 12.264V5.7148C1.59167 4.77921 1.99264 4.44507 2.92824 4.44507H3.59652C4.53211 4.44507 4.93308 4.77921 4.93308 5.7148V12.264C4.93308 13.1996 4.53211 13.5337 3.59652 13.5337H2.92824C1.99264 13.5337 1.59167 13.1996 1.59167 12.264Z' stroke='%23000' stroke-width='1.00242' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99939 12.2641L7.07106 13.868C7.33837 14.1353 7.93983 14.269 8.3408 14.269H10.8803C11.6822 14.269 12.551 13.6675 12.7515 12.8656L14.3553 7.98712C14.6895 7.05152 14.088 6.24959 13.0856 6.24959H10.4125C10.0115 6.24959 9.67736 5.91544 9.74419 5.44765L10.0783 3.30915C10.212 2.70769 9.81101 2.03941 9.20956 1.83893C8.67494 1.63844 8.00665 1.90576 7.73934 2.30673L4.99939 6.38324' stroke='%23000' stroke-width='1.00242' stroke-miterlimit='10'/%3E%3Cpath d='M1.59167 12.264V5.7148C1.59167 4.77921 1.99264 4.44507 2.92824 4.44507H3.59652C4.53211 4.44507 4.93308 4.77921 4.93308 5.7148V12.264C4.93308 13.1996 4.53211 13.5337 3.59652 13.5337H2.92824C1.99264 13.5337 1.59167 13.1996 1.59167 12.264Z' stroke='%23000' stroke-width='1.00242' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.feature-comment__action--chat::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.68111 12.6965H5.34697C2.67384 12.6965 1.33728 12.0282 1.33728 8.68679V5.34538C1.33728 2.67226 2.67384 1.33569 5.34697 1.33569H10.6932C13.3663 1.33569 14.7029 2.67226 14.7029 5.34538V8.68679C14.7029 11.3599 13.3663 12.6965 10.6932 12.6965H10.3591C10.1519 12.6965 9.95143 12.7967 9.82445 12.9638L8.82203 14.3003C8.38096 14.8884 7.65922 14.8884 7.21816 14.3003L6.21573 12.9638C6.10881 12.8168 5.86154 12.6965 5.68111 12.6965Z' stroke='%23000' stroke-width='1.00242' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.67761 5.34595H11.3604' stroke='%23000' stroke-width='1.00242' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.67761 8.68726H8.6873' stroke='%23000' stroke-width='1.00242' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.68111 12.6965H5.34697C2.67384 12.6965 1.33728 12.0282 1.33728 8.68679V5.34538C1.33728 2.67226 2.67384 1.33569 5.34697 1.33569H10.6932C13.3663 1.33569 14.7029 2.67226 14.7029 5.34538V8.68679C14.7029 11.3599 13.3663 12.6965 10.6932 12.6965H10.3591C10.1519 12.6965 9.95143 12.7967 9.82445 12.9638L8.82203 14.3003C8.38096 14.8884 7.65922 14.8884 7.21816 14.3003L6.21573 12.9638C6.10881 12.8168 5.86154 12.6965 5.68111 12.6965Z' stroke='%23000' stroke-width='1.00242' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.67761 5.34595H11.3604' stroke='%23000' stroke-width='1.00242' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.67761 8.68726H8.6873' stroke='%23000' stroke-width='1.00242' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 560px) {
  .feature-comment__avatar {
    width: 25px;
    height: 25px;
    margin-right: 7px;
  }

  .feature-comment__name {
    font-size: 13px;
    margin-right: 11px;
  }

  .feature-comment__meta {
    gap: 10px;
    font-size: 10px;
  }

  .feature-comment__image {
    width: 39px;
    height: 60px;
    margin-right: 11px;
  }

  .feature-comment__text {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .feature-comment__actions {
    font-size: 10px;
    gap: 18px;
  }

  .feature-comment__action {
    gap: 5px;
  }

  .feature-comment__action--like::before,
  .feature-comment__action--chat::before {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }
}