/* La voce di menu deve essere relativa */
.voce-menu .side-menu-btn {
    position: relative;
    z-index: 0;
}

/* Badge */
.voce-menu .side-menu-btn::after {
    content: attr(data-badge);           /* testo del badge */
    position: absolute;
    top: 8px;
    left: -2px;
    z-index: 2;

    padding: 4px 16px 4px 7px;          /* spazio per il testo + punta */
    background-color: #CC1719;
    color: #FFFFFF;

    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    line-height: 14px;
    font-weight: 600;
    text-transform: none !important;
    white-space: nowrap;

    /* forma a freccia verso destra */
    clip-path: polygon(
        0 0,
        calc(100% - 16px) 0,
        100% 50%,
        calc(100% - 16px) 100%,
        0 100%,
        0 0
    );

    /* ombra sotto il badge */
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));

    /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.35); */
}
.voce-menu .side-menu-btn::before {
    content: attr(data-badge);           /* testo del badge */
    position: absolute;
    top: 12px;
    left: -2px;
    z-index: 1;

    padding: 4px 16px 4px 7px;          /* spazio per il testo + punta */
    background-color: rgba(0, 0, 0, .5);
    color: transparent;

    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    line-height: 14px;
    font-weight: 600;
    text-transform: none !important;
    white-space: nowrap;

    /* forma a freccia verso destra */
    clip-path: polygon(
        0 0,
        calc(100% - 16px) 0,
        100% 50%,
        calc(100% - 16px) 100%,
        0 100%,
        0 0
    );

    filter: blur(10px);
    opacity: 0.8;

}

/* Hover: inversione colori quando si passa sulla voce di menu */
.voce-menu .side-menu-btn.active::after {
    background-color: #FFFFFF;
    color: #CC1719;
}


/* debug rapido */
.voce-menu,
.voce-menu * {
    overflow: visible !important;
}