.checkbox-wrapper-2 { background-color: transparent; } .checkbox-wrapper-2 .ikxBAC { appearance: none; background-color: #dfe1e4; border-radius: 72px; border-style: none; flex-shrink: 0; height: 20px; margin: 0; position: relative; width: 30px; transition: 0.3s; } .checkbox-wrapper-2 .ikxBAC::before { bottom: -6px; content: ""; left: -6px; position: absolute; right: -6px; top: -6px; transition: 0.3s; cursor: pointer; } .checkbox-wrapper-2 .ikxBAC, .checkbox-wrapper-2 .ikxBAC::after { transition: 300ms; } .checkbox-wrapper-2 .ikxBAC::after { background-color: #fff; border-radius: 50%; content: ""; height: 14px; left: 3px; position: absolute; top: 3px; width: 14px; cursor: pointer; } .checkbox-wrapper-2 input[type="checkbox"] { cursor: default; } .checkbox-wrapper-2 .ikxBAC:hover { background-color: #c9cbcd; transition-duration: 0s; } .checkbox-wrapper-2 .ikxBAC:checked { background-color: green; } .checkbox-wrapper-2 .ikxBAC:checked::after { background-color: #fff; left: 13px; } .checkbox-wrapper-2 :focus:not(.focus-visible) { outline: 0; } .checkbox-wrapper-2 .ikxBAC:checked:hover { background-color: hsl(from green h s 20%); }