.plugin-activity{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
}

.plugin-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  color:#68737d;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  font-weight:650;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.plugin-activity-total{
  color:#87929c;
  white-space:nowrap;
}

.plugin-activity-bars{
  height:42px;
  display:flex;
  align-items:flex-end;
  gap:2px;
  overflow:hidden;
}

.plugin-activity-bar{
  flex:1 1 0;
  min-width:2px;
  height:3px;
  border-radius:1px 1px 0 0;
  background:rgba(145,243,156,.12);
  transition:height .32s cubic-bezier(.2,.8,.2,1),background .2s ease,opacity .2s ease;
}

.plugin-activity-bar[data-active="true"]{
  background:rgba(145,243,156,.64);
}

.plugin-activity-bars:hover .plugin-activity-bar{
  opacity:.5;
}

.plugin-activity-bars .plugin-activity-bar:hover{
  opacity:1;
  background:#91f39c;
}

.plugin-activity[data-state="loading"] .plugin-activity-bar{
  height:3px!important;
  background:rgba(255,255,255,.07);
}

.plugin-activity[data-state="error"] .plugin-activity-bars{
  opacity:.45;
}

.plugin-activity[data-state="error"] .plugin-activity-total{
  color:#68737d;
}

@media(max-width:680px){
  .plugin-activity-bars{height:36px;gap:1px}
  .plugin-activity-head{font-size:.47rem}
}