@import "./var";
/**
 * swith
 */

.#{$prefix}switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: $switch-width;
    height: $switch-height;
}

.#{$prefix}switch__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    &:disabled{
        opacity: 0;
    }
}


/* 开关 */

.#{$prefix}switch__toggle {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: $switch-border-radius;
    overflow: hidden;
    background-color: $switch-color-bg;
    padding: 0;
    transition-duration: 0.4s;
    transition-property: background-color;
    font-size: 0;
    cursor: pointer;
}


/* 开关 - 小圆点 */

.#{$prefix}switch__toggle:before {
    content: '';
    position: absolute;
    top: ($switch-height - 16px)/2;
    left:($switch-height - 16px)/2;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color:$switch-dot-color-bg;
    pointer-events: none;
    transition-timing-function: cubic-bezier(.54, 1.85, .5, 1);
    transition-duration: 0.4s;
    transition-property: left;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.30);
}

.#{$prefix}switch:hover .#{$prefix}switch__toggle:before {
    background-color: $switch-dot-color-bg;
}


/* 开关 - loading */

.#{$prefix}switch__toggle:after {
    position: absolute;
    top: ($switch-height - 10px)/2;
    left:auto;
    right:($switch-height - 10px)/2;
    display: none;
    content: "";
    width: 10px;
    height: 10px;
    background-image: url(../../assets/image/slice/svg/loading-small.svg);
    -moz-animation: spin .6s infinite linear;
    -webkit-animation: spin .6s infinite linear;
    animation: spin .6s infinite linear;
}

.#{$prefix}switch.is-loading .#{$prefix}switch__input:disabled+.#{$prefix}switch__toggle:after {
    display: block;
}

.#{$prefix}switch.is-loading .#{$prefix}switch__input:checked:disabled+.#{$prefix}switch__toggle:after {
    left: ($switch-height - 12px)/2;
}


/* 选中态 */

.#{$prefix}switch.is-checked .#{$prefix}switch__toggle:before,
.#{$prefix}switch__input:checked+.#{$prefix}switch__toggle:before {
    left: $switch-width - 16px - ($switch-height - 16px)/2;
}

.#{$prefix}switch.is-checked .#{$prefix}switch__toggle,
.#{$prefix}switch__input:checked+.#{$prefix}switch__toggle {
    background-color: $switch-color-bg-checked;
    &:hover{
        background-color: $switch-color-bg-checked-hover;
    }
}

.#{$prefix}switch.is-disabled .#{$prefix}switch__toggle,
.#{$prefix}switch__input:disabled+.#{$prefix}switch__toggle {
    background-color: $switch-color-bg-disabled;
    cursor: not-allowed;
}

.#{$prefix}switch.is-checked.is-disabled .#{$prefix}switch__toggle,
.#{$prefix}switch__input:checked:disabled+.#{$prefix}switch__toggle {
    background-color:$switch-color-bg-checked-disabled;
    cursor: not-allowed;
}


/* 对号、错号小图标 （这个效果没有了）

.#{$prefix}switch__toggle:after {
    position: absolute;
    top: 8px;
    right: 10px;
    content: '';
    width: 12px;
    height: 12px;
    background-image: none;
}

.#{$prefix}switch__input:checked+.#{$prefix}switch__toggle:after {
    right: auto;
    left: 10px;
    background-image: none;
}

.indeterminate .#{$prefix}switch__toggle:after {
    top: 7px;
    right: 9px;
    width: 14px;
    height: 14px;
    background: none;
}

.indeterminate .#{$prefix}switch__input:checked+.#{$prefix}switch__toggle:after {
    right: auto;
    left: 9px;
    background: none;
}
*/