.comment-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.comment-reactions{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.comment-reactions form{
  margin:0;
}
.comment-reactions--dominant{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow:visible;
}
.comment-reaction-picker{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0;
}
.comment-reaction-picker>summary{
  list-style:none;
  cursor:pointer;
}
.comment-reaction-picker>summary::-webkit-details-marker{
  display:none;
}
.comment-reaction-picker:not([open])>.comment-reaction-menu{
  display:none!important;
}
.comment-reaction-picker>summary.comment-reaction-button{
  min-width:27px;
  height:27px;
  padding:0 5px;
  background:transparent;
  border-color:transparent;
}
.comment-reaction-picker>summary.comment-reaction-button:hover,
.comment-reaction-picker>summary.comment-reaction-button:focus-visible,
.comment-reaction-picker[open]>summary.comment-reaction-button{
  color:var(--ui-primary);
  background:#eef4fd;
  border-color:#d5e1f2;
}
.comment-reaction-picker>summary .reaction-icon{
  width:20px;
  height:20px;
}
.comment-reaction-picker>summary .comment-reaction-empty-icon{
  width:15px;
  height:15px;
  color:#6a7688;
  fill:none;
}
.comment-reaction-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 7px);
  z-index:95;
  display:grid;
  grid-template-columns:repeat(4,36px);
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:min(184px,calc(100vw - 24px));
  padding:5px;
  background:#fff;
  border:1px solid #dce3eb;
  border-radius:11px;
  box-shadow:0 12px 30px rgba(19,34,55,.18);
}
.comment-reaction-menu form{
  display:inline-flex;
  margin:0;
}
.comment-reaction-menu .comment-reaction-button{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
}
.comment-reaction-menu .reaction-icon{
  width:24px;
  height:24px;
}
.comment-reaction-button{
  min-width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:0 6px;
  color:#6a7688;
  background:transparent;
  border:1px solid transparent;
  border-radius:999px;
  text-decoration:none;
  transition:color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease;
}
.comment-reaction-button:hover,
.comment-reaction-button:focus-visible{
  color:var(--ui-primary);
  background:#eef4fd;
  border-color:#d5e1f2;
}
.comment-reaction-button:active{
  transform:scale(.96);
}
.comment-reaction-button.is-active{
  color:var(--ui-primary);
  background:#e9f1fc;
  border-color:#cbdcf2;
}
.comment-reaction-button.is-dominant:not(.is-active){
  background:#f4f7fa;
  border-color:#dce3eb;
}
.comment-reaction-button .icon{
  width:14px;
  height:14px;
}
.comment-reaction-button .reaction-icon{
  width:20px;
  height:20px;
}
.comment-reaction-button span{
  min-width:8px;
  color:inherit;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.comment-item .report-menu{
  margin-left:auto;
}
@media(max-width:640px){
  .comment-meta{
    gap:4px;
  }
  .comment-reaction-button{
    min-width:30px;
    height:30px;
    padding-inline:7px;
  }
  .comment-reaction-button .icon{
    width:15px;
    height:15px;
  }
  .comment-reaction-button .reaction-icon{
    width:22px;
    height:22px;
  }
  .comment-reaction-picker>summary.comment-reaction-button{
    min-width:30px;
    height:30px;
    padding-inline:6px;
  }
  .comment-reaction-menu{
    grid-template-columns:repeat(4,38px);
    max-width:calc(100vw - 18px);
  }
  .comment-reaction-menu .comment-reaction-button{
    width:38px;
    min-width:38px;
    height:38px;
  }
}