@container SNDL-ListItem (width>0) {
    :is([role="listitem"], [class^="containerDefault_"])[class*="selected_"] > div,
    [role="tablist"] > div[class*="selected_"] {
        translate: calc((((var(--SNDL-UI_Translate-Intensity, 1) * 1rem) / 1.5) * var(--Enable-Selected_Modifications, 1)));
        scale: calc(1 + (var(--SNDL-UI_Scale-Intensity, 0)*var(--Enable-Selected_Modifications, 1)));
    }
    [role="listitem"], [role="tablist"], [class^="containerDefault_"], div[role="group"] {
        > div {
            width: calc(100% - (2rem * var(--SNDL-UI_Translate-Intensity, 1)));
            transition: scale var(--SNDL-Transition_Fast), translate var(--SNDL-Transition_Fast) !important;
            border-radius: var(--SNDL-UI_Border-Radius) !important;
        }
        > div:hover {
            translate: calc(var(--SNDL-UI_Translate-Intensity, 1) * 1rem);
            scale: calc(1 + var(--SNDL-UI_Scale-Intensity, 0));
        }
        > div:active { scale: 0.95 }

        /* DEV-250112 if this looks terrible, blame ata, not including this unless people genuinely think this is a major problem
        > div:not(:has(a)) {
            width: calc(100% - (2rem * var(--SNDL-UI_Translate-Intensity, 1)));
            transition: scale var(--SNDL-Transition_Fast), translate var(--SNDL-Transition_Fast) !important;
            border-radius: var(--SNDL-UI_Border-Radius) !important;
        }
        > div:not(:has(a)):hover {
            translate: calc(var(--SNDL-UI_Translate-Intensity, 1) * 1rem);
            scale: calc(1 + var(--SNDL-UI_Scale-Intensity, 0));
        }
        > div:not(:has(a)):active { scale: 0.95 }

        
        > div > div,
        > div a > div,
        > div a {
            width: calc(100% - (2rem * var(--SNDL-UI_Translate-Intensity, 1)));
            transition: scale var(--SNDL-Transition_Fast), translate var(--SNDL-Transition_Fast) !important;
            border-radius: var(--SNDL-UI_Border-Radius) !important;
        }
        > div:hover a {
            translate: calc(var(--SNDL-UI_Translate-Intensity, 1) * -1rem);
        }
        > div:hover > div,
        > div:hover > div a > div {
            translate: calc(var(--SNDL-UI_Translate-Intensity, 1) * 1rem);
            scale: calc(1 + var(--SNDL-UI_Scale-Intensity, 0));
        }
        > div:active > div,
        > div:active > div a > div { scale: 0.95 }
        */
    }


    ul[role="group"] > li { translate: none !important; scale: none !important;}
}