%action-group label span { display: none; } %action-group-action { width: 170px; padding: 10px 10px; text-align: left; } %action-group li > * { @extend %action-group-action; } %action-group { width: 30px; height: 30px; position: absolute; top: 8px; right: 3px; } %action-group label { display: block; height: 100%; } %action-group label:last-of-type { position: absolute; width: 100%; z-index: -1; top: 0; } /* this is actually the group */ %action-group ul { position: absolute; right: 0px; padding: 1px; } %action-group ul::before { position: absolute; right: 9px; content: ''; display: block; width: 10px; height: 10px; } %action-group ul:not(.above) { top: 35px; } %action-group ul:not(.above)::before { top: -6px; transform: rotate(45deg); } %action-group ul.above { bottom: 35px; } %action-group ul.above::before { bottom: -6px; transform: rotate(225deg); } %action-group li { position: relative; z-index: 1; } %action-group input[type='radio'], %action-group input[type='radio'] ~ ul, %action-group input[type='radio'] ~ .with-confirmation > ul { display: none; } %action-group input[type='radio']:checked ~ ul, %action-group input[type='radio']:checked ~ .with-confirmation > ul { display: block; } %action-group input[type='radio']:checked ~ label[for='actions_close'] { z-index: 1; }