.x-toggleslider {
    height: 2.15em;
    @include border-radius(1.05em);
    width: 65px;
    background-color: $highlight-color;

    &:before {
        @include absolute-position;
        text-align: center;
        padding: 0 .2em 0 2em;
        font-size: 16px;
        line-height: 32px;
    }

    &.x-disabled {
        &:before {
            opacity: .8;
        }
    }

    .x-thumb {
        &:after {
            background-color: #fff;
            @include absolute-position;
            line-height: 1.7em;
            text-align: center;
        }
    }
}

.x-toggleslider.x-on {
    background-color: $base-color;
    .x-thumb:after {
        content: "|";
    }
}

.x-toggleslider.x-off {
    .x-thumb:after {
        content: "O";
        line-height: 1.9em;
    }
}