.toggle-switch{
        /*size*/
        --size-toggle: 2.2em;
        --toggle-clereance: .6em;
        /*colors*/
        --mode-1-color: #f06f6f;
        --mode-1-text-color: white;
        --mode-2-color: #6ff094;
        --mode-2-text-color: white;
    }
    
    .toggle-switch{
        width: auto;
        height: var(--size-toggle);
        font-size: .7em;
        cursor: pointer;
    }
    
    .toggle-switch-slider{
        display: block;
        position: relative;
        min-width: calc(var(--size-toggle) * 2);
        height: 100%;
        border-radius: 500px;
        box-shadow: 0 0 1px 1px #ffffff;
        outline: solid 1px white;
    }
    
    .toggle-switch-mode{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;
        background: aliceblue;
        border-radius: 500px;
        transition: all .3s ease-in-out;
        padding-right: var(--toggle-clereance);
        padding-left: calc(var(--size-toggle) + var(--toggle-clereance));
    }
    
    .toggle-switch-handle{
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: var(--size-toggle);
        height: var(--size-toggle);
        transform: translateY(-50%);
        border: solid 1px #c1c1c1;
        border-radius: 50%;
        background: white;
        box-shadow: 0 0 10px grey;
        transition: all .3s;
    }
    
    .mode-2-text{
        display: none;
    }
    
    /*variations*/
        /*mode 1*/ 
        .toggle-mode-1 .toggle-switch-mode{
            color: var(--mode-1-text-color);
            background: var(--mode-1-color);
            padding-right: var(--toggle-clereance);
            padding-left: calc(var(--size-toggle) + var(--toggle-clereance));
        }
            
        .toggle-mode-1 .toggle-switch-handle{
            left: 0;
        }
        
        .toggle-mode-1 .mode-2-text{
            display: none;
        }
        .toggle-mode-1 .mode-1-text{
            display: block;
        }
        
        /*mode 2*/
        .toggle-mode-2 .toggle-switch-mode{
            color: var(--mode-2-text-color);
            background: var(--mode-2-color);
            padding-left: var(--toggle-clereance);
            padding-right: calc(var(--size-toggle) + var(--toggle-clereance));
        }
        
        .toggle-mode-2 .toggle-switch-handle{
            left: calc(100% - var(--size-toggle));
        }
        
        .toggle-mode-2 .mode-1-text{
            display: none;
        }
        .toggle-mode-2 .mode-2-text{
            display: block;
        }