/* Efficiency Meter - interaction-level average of how worth-sending the outbound
   messages were (1-10), drawn as a dial. All three zones are always visible;
   the needle and the value take the colour of the band the score falls in. */
.efficiency-meter {
    --efficiency-meter-poor: #e53935;
    --efficiency-meter-fair: #f9a825;
    --efficiency-meter-good: #43a047;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

.efficiency-meter__zone {
    stroke-linecap: butt;
    opacity: 0.45;
}

.efficiency-meter__zone--poor { stroke: var(--efficiency-meter-poor); }
.efficiency-meter__zone--fair { stroke: var(--efficiency-meter-fair); }
.efficiency-meter__zone--good { stroke: var(--efficiency-meter-good); }

/* The zone the score is actually in reads at full strength. */
.efficiency-meter--poor .efficiency-meter__zone--poor,
.efficiency-meter--fair .efficiency-meter__zone--fair,
.efficiency-meter--good .efficiency-meter__zone--good {
    opacity: 1;
}

.efficiency-meter__needle,
.efficiency-meter__hub {
    stroke: currentColor;
    fill: currentColor;
    transition: all 400ms ease;
}

.efficiency-meter__value {
    fill: currentColor;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.efficiency-meter--good { color: var(--efficiency-meter-good); }
.efficiency-meter--fair { color: var(--efficiency-meter-fair); }
.efficiency-meter--poor { color: var(--efficiency-meter-poor); }

/* Sits in the chat header's right column, before the agent name and duration. */
.chat-header-efficiency-meter {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}