/**
 * @class Ext.slider.Toggle
 */

.x-toggle {
    $form-toggle-thumb-size: 26px;

    width: 70px;
    height: $form-toggle-thumb-size;
    border: 0;

    @include background-image(linear-gradient(top, #eeeeee, #ffffff));
    @include border-radius($form-thumb-size/2);
    @include box-shadow(inset 0 3px 4px rgba(0,0,0,.2), inset 0 1px 1px rgba(0,0,0,.3), inset 0 -1px 1px rgba(0,0,0,.1));

    .x-thumb {
        width: $form-toggle-thumb-size;
        height: $form-toggle-thumb-size;

        &.x-dragging {
            opacity: 1;
        }

        &:after {
            top: 0;
            left: 0;
            width: $form-toggle-thumb-size;
            height: $form-toggle-thumb-size;
            @include box-shadow(inset 0 0 2px #fff);
            @include border-radius($form-toggle-thumb-size);
            border: 1px solid #7f8080;
        }
    }
}

.x-toggle-on {
    @include background-image(linear-gradient(top, #2e7be8, #60a5ee));
}