.vcp-classe-energetica__gruppo {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-12);
}

.vcp-classe-energetica__lettere {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vcp-spazio-6);
}

.vcp-classe-energetica__pillole {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vcp-spazio-8);
}

.vcp-classe-energetica__opzione {
    height: var(--vcp-altezza-40);
    background: var(--vcp-colore-superficie);
    transition: background-color var(--vcp-durata-rapida), border-color var(--vcp-durata-rapida), color var(--vcp-durata-rapida);
}

.vcp-classe-energetica__opzione:disabled {
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-classe-energetica__lettera {
    --vcp-classe-energetica-colore: var(--vcp-colore-testo-secondario);

    min-width: var(--vcp-classe-larghezza-minima);
    padding: 0 var(--vcp-spazio-10);
    border: var(--vcp-bordo-spesso) solid var(--vcp-classe-energetica-colore);
    border-radius: var(--vcp-raggio-10);
    font-size: var(--vcp-testo-14);
    font-weight: var(--vcp-peso-grassetto);
    color: var(--vcp-classe-energetica-colore);
}

.vcp-classe-energetica__lettera--a4 {
    --vcp-classe-energetica-colore: var(--vcp-classe-a4);
}

.vcp-classe-energetica__lettera--a3 {
    --vcp-classe-energetica-colore: var(--vcp-classe-a3);
}

.vcp-classe-energetica__lettera--a2 {
    --vcp-classe-energetica-colore: var(--vcp-classe-a2);
}

.vcp-classe-energetica__lettera--a1 {
    --vcp-classe-energetica-colore: var(--vcp-classe-a1);
}

.vcp-classe-energetica__lettera--b {
    --vcp-classe-energetica-colore: var(--vcp-classe-b);
}

.vcp-classe-energetica__lettera--c {
    --vcp-classe-energetica-colore: var(--vcp-classe-c);
}

.vcp-classe-energetica__lettera--d {
    --vcp-classe-energetica-colore: var(--vcp-classe-d);
}

.vcp-classe-energetica__lettera--e {
    --vcp-classe-energetica-colore: var(--vcp-classe-e);
}

.vcp-classe-energetica__lettera--f {
    --vcp-classe-energetica-colore: var(--vcp-classe-f);
}

.vcp-classe-energetica__lettera--g {
    --vcp-classe-energetica-colore: var(--vcp-classe-g);
}

.vcp-classe-energetica__lettera.vcp-classe-energetica__opzione--scelta {
    background: var(--vcp-classe-energetica-colore);
    color: var(--vcp-colore-su-primario);
}

.vcp-classe-energetica__pillola {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-8);
    padding: 0 var(--vcp-spazio-14);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-campo);
    border-radius: var(--vcp-raggio-pillola);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-medio);
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-classe-energetica__pillola-icona {
    display: flex;
    font-size: var(--vcp-testo-12);
}

@media (hover: hover) {
    .vcp-classe-energetica__pillola:enabled:hover {
        border-color: var(--vcp-colore-primario);
    }
}

.vcp-classe-energetica__pillola.vcp-classe-energetica__opzione--scelta {
    border-color: var(--vcp-colore-primario);
    background: var(--vcp-colore-primario);
    color: var(--vcp-colore-su-primario);
}