/* HC_INTERACTION_UI_V1 */

.hc-rating-line{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
  margin:2px 0 12px;
}
.hc-star-rating-form,
.hc-recommend-form{
  margin:0!important;
}
.hc-star-rating-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.hc-star-rating-title{
  font-size:12px;
  font-weight:700;
}
.hc-star-picker{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.hc-star-button{
  appearance:none;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  min-width:31px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#aeb8c6!important;
  font-size:27px!important;
  line-height:1!important;
  cursor:pointer;
  transition:transform .12s ease,color .12s ease,background .12s ease!important;
}
.hc-star-button:hover,
.hc-star-button:focus-visible{
  transform:scale(1.1);
  outline:none;
}
.hc-star-button.is-filled,
.hc-star-button.is-preview{
  color:#f2aa16!important;
}
.hc-star-button:focus-visible{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent)!important;
}
.hc-star-rating-value{
  min-height:16px;
  color:var(--muted);
  font-size:11px;
}
.hc-recommend-form{
  padding-bottom:18px;
}

.hc-comment-editor{
  display:block!important;
  margin-top:8px!important;
}
.hc-comment-editor-label{
  display:block;
  margin:0 0 5px;
  font-weight:700;
}
.hc-editor-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  padding:5px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:color-mix(in srgb, var(--panel) 88%, var(--bg));
}
.hc-editor-toolbar button{
  min-width:28px!important;
  min-height:27px!important;
  margin:0!important;
  padding:4px 8px!important;
  border:1px solid var(--line)!important;
  border-radius:4px!important;
  color:var(--text)!important;
  background:var(--panel)!important;
  box-shadow:none!important;
  font-size:11px!important;
  line-height:1.1!important;
}
.hc-editor-toolbar button:hover,
.hc-editor-toolbar button:focus-visible{
  border-color:var(--primary)!important;
  color:var(--primary)!important;
}
.hc-comment-editor textarea{
  display:block;
  width:100%;
  min-height:112px;
  margin:0!important;
  border-radius:0 0 7px 7px!important;
  resize:vertical;
}
.hc-comment-editor-footer{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:7px;
}
.hc-comment-editor-footer small{
  color:var(--muted);
}
.hc-editor-count{
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.hc-editor-preview{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
}
.hc-editor-preview-title{
  padding:6px 9px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.hc-editor-preview-body,
.hc-comment-body{
  overflow-wrap:anywhere;
}
.hc-editor-preview-body{
  padding:10px;
}
.hc-comment-body{
  margin-top:6px;
  line-height:1.65;
}
.hc-comment-quote{
  margin:8px 0;
  padding:8px 10px;
  border-left:3px solid var(--primary);
  border-radius:0 5px 5px 0;
  background:color-mix(in srgb, var(--primary) 5%, transparent);
}
.hc-comment-code{
  overflow:auto;
  margin:8px 0;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:color-mix(in srgb, var(--bg) 76%, #000 4%);
  white-space:pre-wrap;
}
.hc-comment-list{
  margin:7px 0;
  padding-left:22px;
}

@media(max-width:620px){
  .hc-rating-line{
    align-items:flex-start;
    gap:8px 12px;
  }
  .hc-star-button{
    width:29px;
    height:29px;
    min-width:29px;
    font-size:25px!important;
  }
  .hc-recommend-form{
    padding-bottom:0;
  }
  .hc-editor-toolbar{
    gap:3px;
  }
  .hc-editor-toolbar button{
    padding-inline:6px!important;
  }
  .hc-editor-count{
    width:100%;
    margin-left:0;
  }
}