Toggle CSS block with a single variable

conditional-styles.scss

// https://css-tricks.com/css-switch-case-conditions
// simplified version of my method:

.foo {
    --feature: 1; // 1 is "on", 0 is "off"
  
    animation: foo_styles 1s calc(-1s * (var(--feature) - 1)) paused;

    @keyframes foo_styles {
        0% {
            background: red;
            box-shadow: 0 0 10px;
            color: white;
        }
    }
}