/* 开关容器 */
.toggle-wrapper{
    display: inline-flex;
    align-items: center;
    position: relative;
    border-radius: 3.125em;
    overflow: hidden;
}
/* 复选框，隐藏 */
.toggle-checkbox{
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
}
/* 开关背景 默认样式（关闭）*/
.toggle-container{
    display: flex;
    position: relative;
    border-radius: inherit;
    width: 4em;
    height: 2em;
    background-color: #d1d4dc;
    box-shadow: inset 0.0625em 0 0 #d4d2de,
    inset -0.0625em 0 0 #d4d2de,
    inset 0.125em 0.25em 0.125em 0.25em #b5b5c3;
    transition: all 0.4s;
}

.toggle-wrapper.blue > .toggle-checkbox:checked + .toggle-container {
    background-color: #0050A2;
    box-shadow: inset 0.0625em 0 0 #0050A2,
                inset -0.0625em 0 0 #0050A2,
                inset 0.125em 0.25em 0.125em 0.25em #003F88;
  }
/* 灰色小球 默认样式（关闭） */
.toggle-ball{
    position: relative;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    background-image: radial-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0) 16%),
    radial-gradient(#d2d4dc,#babac2);
    background-position: -0.25em -0.25em;
    background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
    background-repeat: no-repeat;
    box-shadow: 0.25em 0.25em 0.25em #8d889e,
    inset 0.0625em 0.0625em 0.25em #d1d1d6,
    inset -0.0625em -0.0625em 0.25em #8c869e;
    transition: transform 0.4s, box-shadow 0.4s;
}
/* 彩色小球 打开样式（默认隐藏） */
.toggle-ball::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-position: -0.25em -0.25em;
    background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s;
}

.toggle-wrapper.blue > .toggle-container > .toggle-ball::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 16%),
                      radial-gradient(#003F88, #003F88);
    box-shadow: 0.25em 0.25em 0.25em #2634d0,
                inset 0.0625em 0.0625em 0.25em #8dd5ff,
                inset -0.0625em -0.0625em 0.25em #1500ac;
  }

/* 显示彩色小球 */
.toggle-wrapper > .toggle-checkbox:checked + .toggle-container > .toggle-ball::after{
    opacity: 1;
}
/* 打开状态下小球移动到右侧 */
.toggle-checkbox:checked + .toggle-container > .toggle-ball{
    transform: translateX(100%);
}

/*左侧标注设置*/
.toggle-text {
    align-items: center; 
    font-weight: bold; 
    color: #003F88;
    margin-left: 10px;
}