    @import '../global';

    /**
     * Includes default form slider styles.
     *
     * @member Ext.field.Slider
     */
    @mixin sencha-form-sliders {

      .x-slider-field, .x-toggle-field {
        .x-component-outer {
          margin: $form-spacing;
        }
      }

      .x-slider,
      .x-toggle {
          position: relative;
          height: $form-thumb-size;
          min-height: 0;
          min-width: 0;

        > * {
            position: absolute;
            width: 100%;
            height: 100%;
        }
      }

      .x-slider.x-item-disabled {
        opacity: .6;
      }

      @if $basic-slider {
        .x-thumb {
          position: absolute;
          height: $form-thumb-size;
          width: $form-thumb-size;
          border: #000;
          background-color: #777;

          &.x-dragging {
            background-color: #AAA;
          }
        }

        // Create the slider track
        .x-slider:after {
          @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
          right: 0;
          margin: 0 $form-toggle-size/2;
          border: .1em solid rgba(#000, .1);
          border-bottom: 0;
          background-color: $form-light;
        }
      } @else {
        .x-thumb {
          position: absolute;
          height: $form-thumb-size;
          width: $form-thumb-size;

          // The actual thumb
          &:before {
            @include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space);
            border: .1em solid darken($form-light, 30%);
            @if $include-border-radius { @include border-radius($form-toggle-size/2); }
            // overflow: visible;
            @include background-gradient($form-light);
            -webkit-box-shadow: inset rgba(#fff, .5) 0 0 .1em, inset rgba(#fff, .3) 0 -.1em 0;
            @include background-clip(padding-box);
          }

          &.x-dragging {
            &:before {
              @include background-gradient(darken($form-light, 5%));
            }
            opacity: 1;
          }
        }

        // Create the slider track
        .x-slider:after {
          @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
          right: 0;
          margin: 0 $form-toggle-size/2;
          @include background-gradient($form-light, 'recessed');
          border: .1em solid rgba(#000, .1);
          border-bottom: 0;
          -webkit-box-shadow: rgba(#fff,.7) 0 .1em 0;
          @if $include-border-radius { @include border-radius($form-slider-size/2); }
        }
      }

      .x-toggle {
        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%);
        @include background-gradient($form-light, 'recessed');
        -webkit-box-flex: 0;

        // 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-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);
      }
    }