[data-role="toggle"] { 
    appearance:none;
    position:relative;
    display:inline-flex !important;
    min-height:3em;
    min-width:3em;
    box-sizing:border-box; 
    border-width:0px; 
    background-color:transparent !important; 
    text-decoration:none; 
    outline:none;

    font-family:'Work Sans', sans-serif;
    font-weight:normal;
    font-size:1em;    
    font-stretch: 100%;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: 400;
    letter-spacing: normal;
    text-indent: 0px;
    text-rendering: auto;
    text-shadow: none;
    text-transform: none;
    word-spacing: 0px;
    writing-mode: horizontal-tb;
    
    flex-direction:row;
    align-items:center;
    align-content:center;
    justify-content:center;
    white-space:nowrap;
}
[data-role="toggle"] > .label:empty { display:none; }
[data-role="toggle"] > .toggler { height:fit-content; width:fit-content; cursor:pointer; }
[data-role="toggle"] > .toggler > i { margin:0; text-align:center; font-size:1.5em; }
[data-role="toggle"] > .toggler.on > i { color:var(--cavelo-forest); }
[data-role="toggle"] > .toggler.off > i { color:inherit; }
[data-role="toggle"] > .label:not(.hidden):not(:empty) + .toggler { margin-left:0.5em; width:-webkit-fill-available; }
[data-role="toggle"] > .toggler + .label:not(.hidden):not(:empty) { margin-left:0.5em; width:-webkit-fill-available; }

[data-role="toggle"].xs     { font-size:0.6rem; }
[data-role="toggle"].xsmall { font-size:0.7rem; }
[data-role="toggle"].small  { font-size:0.8rem; }
[data-role="toggle"].medium { font-size:1.0rem; }
[data-role="toggle"].large  { font-size:1.2rem; }


[data-role="toggle"].changed > .label {
    /* .toggler > i {  */
    text-shadow: -2px 0 var(--cavelo-orange-20), 0 2px var(--cavelo-orange-20), 2px 0 var(--cavelo-orange-20), 0 -2px var(--cavelo-orange-20); 
}



[data-role="toggle"] > .toggler.on.on-green > i { color:var(--cavelo-green); }
[data-role="toggle"] > .toggler.on.on-orange > i { color:var(--cavelo-orange); }
[data-role="toggle"] > .toggler.on.on-blue > i { color:var(--cavelo-blue); }
[data-role="toggle"] > .toggler.on.on-navy > i { color:var(--cavelo-navy); }
[data-role="toggle"] > .toggler.on.on-black > i { color:var(--cavelo-black); }

[data-role="toggle"] > .toggler.off.off-green > i { color:var(--cavelo-green); }
[data-role="toggle"] > .toggler.off.off-orange > i { color:var(--cavelo-orange); }
[data-role="toggle"] > .toggler.off.off-blue > i { color:var(--cavelo-blue); }
[data-role="toggle"] > .toggler.off.off-navy > i { color:var(--cavelo-navy); }
[data-role="toggle"] > .toggler.off.off-black > i { color:var(--cavelo-black); }