.input-switch { display: inline-block; vertical-align: middle; padding-left: 5px; } .input-switch-hidden-input { display: none; + .input-switch-btn { display: block; width: 34px; height: 20px; position: relative; outline: 0; margin: 0; font-weight: normal; cursor: pointer; user-select: none; padding: 1px; background-color: @rp-highlight-blue; border-radius: 0.875em; transition: background 0.15s ease, border-color 0.15s ease; &::before { content: ''; display: block; width: 16px; height: 16px; position: relative; left: 1px; top: 1px; background-color: #fff; border-radius: 0.875em; transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease; } } &:checked + .input-switch-btn { background-color: @ol-green; border-color: #fff; &::before { left: 15px; top: 1px; } } &:disabled + .input-switch-btn { cursor: default; opacity: 0.35; } }