.uniformTristate{
    display: inline-block;
    background: white;
    border: 0.1em solid rgba(black, 0.2);
    box-shadow: inset 0.1em 0.1em 0.2em rgba(black, 0.1);
    line-height: 0.6;
    border-radius: 10em;
    padding: 0 0.1em;
    position: relative;
    height: 0.8em;
    transition: background 0.1s ease-in-out;
    &.-focus{
        box-shadow: inset 0.1em 0.1em 0.2em rgba(black, 0.1), 0 0 0 0.1em #3b88fd;
    }
    
    &.-true{
        background: #3b88fd;
        input{
            &:last-child {
                opacity: 0.5;
                content: icon-x-block(32, #FFFFFF);
            }
            &:first-child{
                content: icon-check(#3b88fd);
            }
        }
        &:before{
            left: -6%;
            transform: translate(0, -50%);
            border-color: #306dca
        }
    }
    &.-false{
        background: #cccccc;
        input{
            &:first-child{
                content: icon-check(#FFFFFF);
            }
            &:last-child{
                content: icon-x-block(32, #a3a3a3);
            }
        }
        &:before{
            left: auto;
            right: -6%;
            transform: translate(0, -50%);
            border-color: #a3a3a3;
        }
    }
    &:before{
        width: .9em;
        height: .9em;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 0.1em solid #b3b3b3;
        background: white;
        content: "";
        border-radius: 50%;
        transition: left 0.1s ease-in-out;
        z-index: 1;
    }
    input{
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        width: 0.6em;
        height: 0.6em;
        vertical-align: top;
        z-index: 2;
        position: relative;
        cursor: pointer;
        &:focus{
            outline: none;
        }
        &:not(:first-child):not(:last-child){
            margin: 0 0.1em;
        }
        
        &:first-child{
            content: icon-check(#b3b3b3);
        }
        &:last-child {
            content: icon-x-block(32, #b3b3b3);
        }
    }
}