    @import '../global';

    /*
     * Includes basic form slider styles.
     */
    @mixin sencha-form-sliders {

      .x-slider {
        position: relative;
        height: $form-thumb-size;
        margin: $form-spacing;
        min-height: 0;
      }

      .x-thumb {
        position: absolute;
        height: $form-thumb-size;
        width: $form-thumb-size;
        border: 1px solid red;

        &.x-dragging {
          background-color: red;
        }
      }

      .x-input-slider {
        width: auto;
        background-color: #000;
      }

      .x-field-toggle, .x-field-slider {
        background-color: #fff;
    //    @extend .x-input-el;
      }

      .x-field-toggle .x-slider {
        width: $form-thumb-size * 2;
        @if $include-border-radius { @include border-radius($form-thumb-size/2); }
        overflow: hidden;
        border: .1em solid darken($form-light, 15%);
        // -webkit-transform: translate3d(0px, 0px, 0px);
        @include background-gradient($form-light, 'recessed');
        z-index: 2;

        // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area
        // UPDATED: Doesnt fly on Android...
        // &:after {
        //   @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0);
        //   -webkit-mask: theme_image($theme-name, "trackmask_outer.png");
        //   background-color: white;
        //   -webkit-mask-size: $form-thumb-size*2 $form-thumb-size;
        //   pointer-events: none;
        //   z-index: 4;
        // }

        .x-thumb {

          .x-toggle-thumb-off, .x-toggle-thumb-on {
            display: none;
          }

          &.x-dragging {
            opacity: 1;
          }

          &:before {
            top: ($form-thumb-size - $form-toggle-size) / 2;
          }

          // Actual thumb
          // &:after {
          //   @include insertion($form-thumb-size, $form-thumb-size, 0, 0);
          //   -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em;
          //   @if $include-border-radius { @include border-radius($form-thumb-size/2); }
          //   -webkit-transform: scale(.65);
          //   @include background-gradient($complement_light, 'glossy');
          //   border: 1px solid $complement;
          //   overflow: visible;
          //   z-index: 2;
          // }

          // &.x-dragging {
          //   &:after {
          //     -webkit-transform: scale(.75);
          //   }
          // }
          //
          // Used to animate the thumb. class added/removed by javascript when needed.
          // &.x-animate {
          //   -webkit-transition: left .2s ease-in-out;
          // }
        }

        &.x-toggle-on {
          @include background-gradient($confirm-color, 'recessed');
        }
      }

      .x-android .x-field-toggle .x-slider {
        //-webkit-transform: translate(0px, 0px);
      }
    }