//
// switch styles (to be used with switchs.js)
// --------------------------------------------------

.#{$namespace}switch {
    position: relative;
    display: block;
    width: 74px;
    height: 30px;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #ddd;
    border-radius: 20px;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: background-color, border;
    transition-property: background-color, border;
    &.#{$namespace}disabled {
        opacity: .3;
    }
    // Sliding handle
    .#{$namespace}switch-handle {
        position: absolute;
        top: -1px;
        left: -1px;
        z-index: z("default");
        width: 28px;
        height: 28px;
        background-color: #fff;
        background-clip: padding-box;
//      border: 1px solid #ddd;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.4);
        box-shadow: 0 2px 5px rgba(0,0,0,.4);
        border-radius: 16px;
        -webkit-transition-property: -webkit-transform, width,left;
        transition-property: transform, width,left;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
    }
    &:before {
        position: absolute;
        top: 3px;
        right: 11px;
        font-size: 13px;
        color: #999;
        text-transform: uppercase;
        content: "Off";
    }
    &.#{$namespace}dragging {
        background-color: $chrome-color;
        border-color: $chrome-color;
        .#{$namespace}switch-handle {
           width: 38px;
        }
        &.#{$namespace}active{
            .#{$namespace}switch-handle {
               width: 38px;
               left:-11px;
            }    
        }
    }
    // Active state for switchborder: 2px solid $positive-color;
    &.#{$namespace}active {
        background-color: $positive-color;
        border-color: $positive-color;
//        @include box-shadow(inset 0 0 0 13px $positive-color);
        .#{$namespace}switch-handle {
//          border-color: $positive-color;
            @include transform(translate(43px,0));
        }
        &:before {
            right: auto;
            left: 15px;
            color: #fff;
            content: "On";
        }
    }
    // Hide the checkbox
    input[type="checkbox"] {
        display: none;
    }
}

.#{$namespace}switch-mini{
    width: 47px;
    &:before {
        display: none;
    }
    // Active state for switch
    &.#{$namespace}active {
        .#{$namespace}switch-handle {
            @include transform(translate(16px,0));
        }
    }
}

//增加蓝色开关
.#{$namespace}switch-blue {
    // Sliding handle
    .#{$namespace}switch-handle {
//      border: 1px solid rgba(0, 0, 0, .2);
//      @include box-shadow(0 3px 3px rgba(0,0,0,.08));
    }
    // Active state for switch
    &.#{$namespace}active {
        background-color: $primary-color;
        border: 2px solid $primary-color;
//        @include box-shadow(inset 0 0 0 13px $primary-color);
//      .#{$namespace}switch-handle {
//          border-color: $primary-color;
//      }
    }
}