.interruttore {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 0.25em 0.5em ; background-color: var(--secondary-color); border-radius: 0.7em; }
.interruttore * {-webkit-box-sizing: border-box;box-sizing: border-box;}
.interruttore:before, #interruttore:after {-webkit-box-sizing: inherit;box-sizing: inherit; margin:0; padding:0;}

.rocker {display: inline-block; position: relative; font-size: 0.8rem; font-weight: bold; text-align: center; text-transform: uppercase; color: #888; width: 7em; height: 3.5em; overflow: hidden;}
.rocker-small {font-size: 0.5em; margin: 1em;}

.rocker::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.rocker input {opacity: 0; width: 0; height: 0;}

.switch-left, .switch-right {cursor: pointer; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 2.5em; width: 3em; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;}


/* Superficie SX alzata */
.switch-left {height: 2.4em; width: 2.75em; left: 0.85em; bottom: 0.4em; background-color: #ddd; -webkit-transform: rotate(15deg) skewX(15deg); -ms-transform: rotate(15deg) skewX(15deg); transform: rotate(15deg) skewX(15deg);}

/* Superficie SX abbassata */
input:checked + .switch-left {background-color: #4CAF50; color: #fff; bottom: 0px; left: 0.5em; height: 2.5em; width: 3em; -webkit-transform: rotate(0deg) skewX(0deg); -ms-transform: rotate(0deg) skewX(0deg); transform: rotate(0deg) skewX(0deg);}

/* Ombra laterale SX */
.switch-left::before, .switch-right::before {content: ""; position: absolute; width: 0.4em; height: 2.45em; bottom: -0.45em; background-color: #CCC; -webkit-transform: skewY(-65deg); -ms-transform: skewY(-65deg); transform: skewY(-65deg);}
.switch-left::before {left: -0.4em;}



/* Superficie DX abbassata */
.switch-right {right: 0.5em; bottom: 0; background-color: #C70000; color: #fff;}

/* Superficie DX alzata */
input:checked + .switch-left + .switch-right {background-color: #ddd; color: #888; bottom: 0.4em; right: 0.8em; height: 2.4em; width: 2.75em; -webkit-transform: rotate(-15deg) skewX(-15deg); -ms-transform: rotate(-15deg) skewX(-15deg); transform: rotate(-15deg) skewX(-15deg);}

/* Ombra laterale DX */
input:checked + .switch-left + .switch-right::before {background-color: #CCC;}

/* ? */
input:checked + .switch-left::before {background-color: transparent; width: 3.0833em;}
.switch-right::before {right: -0.375em; background-color: transparent; -webkit-transform: skewY(65deg); -ms-transform: skewY(65deg); transform: skewY(65deg);}



/* Keyboard Users */
input:focus + .switch-left {color: #333;}
input:checked:focus + .switch-left {color: #fff;}
input:focus + .switch-left + .switch-right {color: #fff;}
input:checked:focus + .switch-left + .switch-right {color: #333;}