@import 'ext-base';

@if $include_form_sliders == true {
  .x-field-slider, .x-field-toggle, .x-spinner, .x-field-checkbox, x-field-radio {
    .x-field-mask {
      display: none;
    }
  }

  .x-field-slider .x-slider {
    position: relative;
    overflow: hidden;
    height: $thumbsize;
    margin: 0 .5em;

    &:after {
      @include insertion(96%, $thumbsize/8, $togglesize/2 - $togglesize/16 + .1em, 2%);
      @include bg_gradient(lighten($complement_light, 10%));
      border: 1px solid $complement_light;
      -webkit-box-shadow: rgba(255,255,255,.7) 0 1px 0;
      -webkit-border-radius: $thumbsize/16;
    }

    .x-field-thumb.x-field {
      margin: 2px;
      min-height: 0;

      height: $togglesize + .2em;
      width: $togglesize + .2em;
      padding: $togglesize/2;
      position: absolute;
      
      $dotsize: $togglesize/6 * .65;
      
      // The actual thumb
      &:before {
        border: 1px solid lighten($complement, 15%);
        @include insertion($togglesize, $togglesize, 0, 0);
        -webkit-border-radius: $togglesize/2;
        overflow: visible;
        @include bg_gradient($complement_light, 'glossy');
        -webkit-box-shadow: lighten($active_color, 40%) 0 .1em 0;
        -webkit-box-shadow: inset #fff 0 0 .1em, inset #fff 0 -.1em 0;
        -webkit-transform: scale(.65);
        -webkit-transition: -webkit-transform 100ms ease-in-out;
      }

      &.x-dragging {
        &:before {
          -webkit-transform: scale(.75);
          @include bg_gradient(darken($complement_light, 5%), 'glossy');
        }
        
        opacity: 1;
      }
    }
  }

  .x-field-toggle {
    .x-slider {
      height: $thumbsize;
      width: $thumbsize * 2;
      margin: .6em;
      -webkit-border-radius: $thumbsize/2;
      -webkit-box-shadow: inset rgba(0,0,0,.3) 0 0 .3em;
      position: relative;
      overflow: hidden;
      -webkit-transform: translate3d(0,0,0);
      @include bg_gradient($complement_light, 'recessed');

      .x-field-thumb {
        position: absolute;
        width: $togglesize + .35em;
        height: $togglesize;
        overflow: visible;

        &.x-dragging {
          opacity: 1;
        }
        
        // Actual thumb
        &:after {
          @include insertion($thumbsize, $thumbsize, 0, 0);
          -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em;
          -webkit-border-radius: $thumbsize/2;
          -webkit-transform: scale(.65);
          @include bg_gradient($complement_light, 'glossy');
          border: 1px solid $complement;
          overflow: visible;
          z-index: 2;
        }
        
        &.x-dragging {
          &:after {
            -webkit-transform: scale(.75);
          }
        }
      }

      &.x-toggle-on {
        @include bg_gradient($bright_color, 'recessed');
      }
    }
  }
}