.x-toggle {
    height: 2.15em;
    @include border-radius(1.05em);
    border: 1px solid #9D9D9D;
    width: 90px;
    @include background(linear-gradient(color-stops(#dcdcdc, #e2e2e2)));
    @include box-shadow(inset 0 2px 2px #C0C0C0);
    
    &:before {
        @include absolute-position;
        text-align: center;
        padding: 0 .2em 0 2em;
        font-size: 16px;
        line-height: 32px;
    }

    &.x-item-disabled {
        &:before {
            color: #bbbbbb;
        }
    }
}

.x-toggle-on {
    .x-thumb:after {
        @include background(linear-gradient(color-stops(#3b94c9, #0277ba)));
        @include box-shadow(inset 0 1px 0 rgba(#fff, .2));
        border-color: #7D7D7D;
    }

    &:before {
        content: attr(data-activelabel);
        padding: 0 2em 0 .2em;
    }
}

.x-toggle-off {
    &:before {
        content: attr(data-inactivelabel);
    }
}