@mixin switch-on { left: 10px; right: 0; } @mixin switch-off { left: 0; right: 10px; } .settings-switch { display: block; padding: .5em; margin: .5em; color: black; background: linear-gradient(90deg, #018189 50%, #9e3610 50%); border-radius: 1em; position: relative; height: 1em; span { background: #444 ; color: #eee; font-size: 12px; position: absolute; top:0; bottom: 0; border-radius: 16px; line-height: 32px; transition: left .2s, right .2s; } } #settings-annotations span {@include switch-on;} .no-annotations { #settings-annotations span {@include switch-off;} .annotation {display: none;} } #settings-themes span {@include switch-on;} .always-hide-themes { #settings-themes span {@include switch-off;} } #settings-line-numbers span {@include switch-on;} .always-hide-line-numbers { #settings-line-numbers span {@include switch-off;} } #settings-references span {@include switch-on;} .no-references { #settings-references span {@include switch-off;} }