.zent-switch-checked {
    border-color: $switch-on;
    background-color: $switch-on;
    &::after {
        left: 32px;
    }
    .zent-switch-inner {
        left: 6px;
        top: 9px;
    }
}

.zent-switch-disabled {
    cursor: not-allowed;
    background: $switch-disabled;
    border-color: $switch-disabled;
    &.zent-switch-checked {
        background: $switch-disabled-checked;
        border-color: $switch-disabled-checked;
    }
    &::after {
        background: $switch-disabled-after;
        cursor: not-allowed;
    }
}

.zent-switch-loading {
    position: relative;
    color: transparent;
    cursor: not-allowed;

    &::after {
        cursor: not-allowed;
    }

    /* 小switch暂不显示loading */
    &.zent-switch-small {
        &::before {
            display: none!important;
        }
    }

    &.zent-switch-large {
        &::before {
            margin: -5px 0 0 -17px;
        }
        &.zent-switch-checked {
            &::before {
                margin: -5px 0 0 23px;
            }
        }
    }

    &.zent-switch-checked {
        &::before {
            margin: -5px 0 0 15px;
        }
    }

    &::before {
        content: ' ';
        position: absolute;
        top: 43%;
        left: 38%;
        z-index: 2;
        width: 16px;
        height: 16px;
        margin: -5px 0 0 -15px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 100%;
        box-sizing: border-box;
    }

    &::before {
        border-color: #666666 transparent transparent transparent;
        animation: switch-spin 0.6s linear;
        animation-iteration-count: infinite;
    }
}

@keyframes switch-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}