/*
    滑动开关
*/

@import "../../less/config/main";
.inset-shadow(@x, @y, @weight, @color) {
    -webkit-box-shadow: inset @x @y @weight @color;
    -moz-box-shadow: inset @x @y @weight @color;
    -ms-box-shadow: inset @x @y @weight @color;
    -o-box-shadow: inset @x @y @weight @color;
    box-shadow: inset @x @y @weight @color;
}

.cui-toggle-box-component {
    .inset-shadow(0px, 1px, 2px, lighten(@c-common-black, 50%));
    input {
        display: none;
    }
    &.on {
        .component-set(24px, 2px, 33px, @c-common-white, @c-important-c);
        .label-set(24px, 0);
    }
    &.off {
        .component-set(24px, 2px, 0, @c-common-white, @c-important-d);
        .label-set(0, 24px);
    }
}

.label-set(@l, @r) {
    .cui-onoffswitch {
        .switch-content {
            display: inline-block;
            padding-left: @l;
            padding-right: @r;
        }
    }
}

//
.component-set(@height, @padding, @iconLeft, @bgColor, @iconColor) {
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    width: 60px;
    background-color: @bgColor;
    height: @height;
    border-radius: @height;
    overflow: hidden;
    .cui-onoffswitch {
        position: relative;
        width: auto;
        display: table;
        // text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        left:@iconLeft*-1;
        transition: all 0.1s ease-in 0s;
        .switch-icon {
            position: relative;
            // top: 50%;
            // margin-top: @height / -2;
            display: inline-block;
            vertical-align: middle;
            border: solid @padding @bgColor;
            width: @height;
            height: @height;
            line-height: @height - @padding *2;
            color: @c-common-white;
            background-color: @iconColor;
            border-radius: 50%;
            transition: all 0.3s ease-in 0s;
        }
        >span {
            display: table-cell;
            vertical-align: middle;
            padding: 0 3px;
            transition: all 0.3s ease-in 0s;
            color:@iconColor;
        }
    }
}