advance logic in css
.advanced {
--i: var(--enabled, 0);
--noti: calc(1 - var(--i));
filter:
contrast(calc(1 - var(--noti)*.9))
opacity(calc(1 - var(--noti)*.7));
pointer-events: var(--enabled, none);
[id='toggle']:checked ~ & { --enabled: 1 }
}