:root{--container_height:33px;--toggle_width:27px;--border_size:3px;--container-color:var(--c-gray)}.toggle-container.small{--container_height:25px;--toggle_width:20px}.toggle-container{display:flex;align-items:center;height:var(--container_height);width:calc(var(--container_height)*1.75);min-width:calc(var(--container_height)*1.75);overflow:hidden;background-color:#a5a5a5;border:var(--border_size) solid #a5a5a5;border-radius:30px;position:relative;cursor:pointer}.toggle-container.active{background-color:var(--c-red);border:2px solid var(--c-red)}.toggle-container .toggle-button{background-color:var(--c-gray-light);border:2px solid var(--c-gray-light);border-radius:100%;width:var(--toggle_width);height:var(--toggle_width);transition:all .3s ease}.toggle-container .toggle-button.active{margin-left:calc(100% - var(--toggle_width))}