#switch {
    @height: 50px;
    width: 100%;
    user-select:none;
    -moz-user-select:none;
    text-transform: uppercase;

    input[type=checkbox] {
        display: none;
    }

    label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        background-color: @highlight;
        height: 100%;
        position: relative;
        padding: 0;
        margin-bottom: 0;
    }

    .options {
        align-items: center;
        display: flex;
        width: 100%;
        min-height: @height;
        margin-left: 0;
    }

    span {
        display: block;
        width: 50%;
        padding: 0 5px;
        text-align: center;
        position: relative;
        z-index: 2;
        color: @darkHighlight;
    }

    .indicator {
        display: block;
        width: 50%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0%;
        z-index: 1;
        transition: transform 0.3s ease-out;
        border-bottom: 6px solid @darkHighlight;
    }

    input[type=checkbox]:checked + label > .indicator {
        transform: translate3d(100%, 0, 0);
    }
}