:root,:host {
    --van-switch-size: 26px;
    --van-switch-width: calc(1.8em + 4px) ;
    --van-switch-height: calc(1em + 4px) ;
    --van-switch-node-size: 1em;
    --van-switch-node-background: var(--van-white);
    --van-switch-node-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05);
    --van-switch-background: rgba(120, 120, 128, .16);
    --van-switch-on-background: var(--van-primary-color);
    --van-switch-duration: var(--van-duration-base);
    --van-switch-disabled-opacity: var(--van-disabled-opacity)
}

.van-theme-dark {
    --van-switch-background: rgba(120, 120, 128, .32)
}

.van-switch {
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    width: var(--van-switch-width);
    height: var(--van-switch-height);
    font-size: var(--van-switch-size);
    background: var(--van-switch-background);
    border-radius: var(--van-switch-node-size);
    cursor: pointer;
    transition: background-color var(--van-switch-duration)
}

.van-switch__node {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--van-switch-node-size);
    height: var(--van-switch-node-size);
    font-size: inherit;
    background: var(--van-switch-node-background);
    border-radius: 100%;
    box-shadow: var(--van-switch-node-shadow);
    transition: transform var(--van-switch-duration) cubic-bezier(.3,1.05,.4,1.05)
}

.van-switch__loading {
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    line-height: 1
}

.van-switch--on {
    background: var(--van-switch-on-background)
}

.van-switch--on .van-switch__node {
    transform: translate(calc(var(--van-switch-width) - var(--van-switch-node-size) - 4px))
}

.van-switch--on .van-switch__loading {
    color: var(--van-switch-on-background)
}

.van-switch--disabled {
    cursor: not-allowed;
    opacity: var(--van-switch-disabled-opacity)
}

.van-switch--loading {
    cursor: default
}