._simple-switch-checkbox {
    height: 0px;
    width: 0px;
    overflow: hidden;
    opacity: 0
}

._simple-switch-track {
    --simple-switch_size: 0.12rem;
    font-size: inherit;
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    background: #ccc;
    border-radius: 0.12rem;
    padding: 0 calc((12px * 1.25) - 0.06rem) 0 0;
    border: 0.03rem solid #ccc;
    transition: background 250ms ease-out;
    outline: none;
    box-sizing: padding-box
}

@supports (--foobar: false) {
    ._simple-switch-track {
        border-radius: var(--simple-switch_size);
        padding: 0 calc((var(--simple-switch_size) * 1.25) - 0.06rem) 0 0
    }
}

._simple-switch-track.on {
    background: #0079FE;
    border: 0.03rem solid #0079FE
}

._simple-switch-track.on .handle {
    transform: translateX(calc((0.12rem * 1.6) - 0.06rem))
}

@supports (--foobar: false) {
    ._simple-switch-track.on .handle {
        transform: translateX(calc((var(--simple-switch_size) * 1.6) - 0.06rem))
    }
}

._simple-switch-track.focus {
    border: 0.03rem solid #03A9F4
}

._simple-switch-track .handle {
    position: relative;
    width: calc(0.06rem);
    height: calc(0.06rem);
    border-radius: 0.12rem;
    background: #fff;
    display: block;
    transition: transform 250ms ease-out;
    will-change: transition;
    z-index: 2
}

@supports (--foobar: false) {
    ._simple-switch-track .handle {
        width: calc(var(--simple-switch_size) - 0.06rem);
        height: calc(var(--simple-switch_size) - 0.06rem);
        border-radius: var(--simple-switch_size)
    }
}

._simple-switch-track._material {
    padding: 0;
    margin: 0.03rem 0;
    height: 0.09rem;
    width: 0.18rem;
    border: none;
    vertical-align: top
}

@supports (--foobar: false) {
    ._simple-switch-track._material {
        height: calc(var(--simple-switch_size) - 0.03rem);
        width: calc(var(--simple-switch_size) * 1.5)
    }
}

._simple-switch-track._material.on {
    background: #0079FE
}

._simple-switch-track._material.on:after {
    transform: translateX(0.09rem)
}

@supports (--foobar: false) {
    ._simple-switch-track._material.on:after {
        transform: translateX(calc(var(--simple-switch_size) - 0.03rem))
    }
}

._simple-switch-track._material.on .handle {
    background: #0079FE;
    transform: translateX(0.09rem)
}

@supports (--foobar: false) {
    ._simple-switch-track._material.on .handle {
        transform: translateX(calc(var(--simple-switch_size) - 0.03rem))
    }
}

._simple-switch-track._material:after {
    content: "";
    position: absolute;
    top: -0.0925rem;
    left: -0.1rem;
    width: 0.26rem;
    height: 0.26rem;
    z-index: 1;
    background: rgba(0, 0, 0, 0.125);
    border-radius: 0.26rem;
    opacity: 0;
    will-change: opacity;
    transition: opacity 250ms ease-out, transform 250ms ease-out
}

@supports (--foobar: false) {
    ._simple-switch-track._material:after {
        width: calc(var(--simple-switch_size) + 0.14rem);
        height: calc(var(--simple-switch_size) + 0.14rem);
        border-radius: calc(var(--simple-switch_size) + 0.14rem)
    }
}

._simple-switch-track._material.focus:after {
    opacity: 1
}

._simple-switch-track._material .handle {
    position: absolute;
    top: -0.0225rem;
    left: -0.03rem;
    width: 0.12rem;
    height: 0.12rem;
    box-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.4);
    transition: transform 250ms ease-out, background 250ms ease-out
}

@supports (--foobar: false) {
    ._simple-switch-track._material .handle {
        width: var(--simple-switch_size);
        height: var(--simple-switch_size)
    }
}