.app-triple-switch {
    height: var(--form-editor-input-lineHeight);
    line-height: var(--form-editor-input-lineHeight);
    position: relative;
    > .switch-core {
        margin: 0;
        display: inline-block;
        cursor: pointer;
        position: relative;
        width: 44px;
        height: 20px;
        border: 1px solid #dcdfe6;
        outline: 0;
        border-radius: 10px;
        box-sizing: border-box;
        background-color: #dcdfe6;
        transition: border-color 0.3s, background-color 0.3s;
        vertical-align: middle;

        &.disabled {
            cursor: not-allowed;
        }

        &::before {
            display: none;
            width: 2px;
            height: 100%;
            content: '';
            z-index: 1;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        &::after {
            display: block;
            width: 16px;
            height: 16px;
            content: '';
            z-index: 2;
            background-color: #fff;
            position: absolute;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            transition: all .3s;
        }
        &.open {
            background-color: #409eff;
            border-color: #409eff;
            &::after {
                right: 1px;
                left: auto;
                transform: translateY(-50%);
            }
        }
        &.close {
            border-color: #ff4949;
            background-color: #ff4949;
            &::after {
                left: 0px;
                transform: translateY(-50%);
            }
        }
    }
}