@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 {
    display: none;
    span {@include switch-on;}
    .no-references {
        #settings-references span {@include switch-off;}
    }
}