.react-switch-checkbox { height: 0; width: 0; visibility: hidden; } .react-switch-label { display: flex; align-items: center; justify-content: space-between; cursor: pointer; width: 44px; height: 22px; background: white; border-radius: 11px; @apply border-palette-200; border-width: 1px; position: relative; transition: background-color 0.2s; } .react-switch-label .react-switch-button { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; transition: 0.2s; } .react-switch-checkbox:checked + .react-switch-label .react-switch-button { left: calc(100% - 2px); transform: translateX(-100%); } .react-switch-label:active .react-switch-button { width: 20px; }