$size: 12px; .toggle { cursor: pointer; font-weight: $weight-semibold; position: relative; &.is-disabled { color: $grey-blue; cursor: not-allowed; } &.is-flex { display: flex; align-items: center; .label { padding-left: 0.5rem; padding-bottom: 1px; } } .input { opacity: 0; width: 0; height: 0; position: absolute; z-index: -1; } .toggler { display: inline-block; position: relative; vertical-align: baseline; position: relative; top: 1px; width: $size * 2; height: $size; border-radius: $size; background: $grey-blue; transition: background 0.3s ease-in-out; &::after { content: ' '; display: block; position: absolute; width: calc(#{$size} - 4px); height: calc(#{$size} - 4px); border-radius: 100%; background: $white; left: 2px; top: 2px; transform: translateX(0); transition: transform 0.3s ease-in-out; } } // Always style the toggler based off the input state to // ensure that the native input is driving behavior. .input:focus + .toggler { box-shadow: 0 0 0 1px $grey-light; outline: none; } .input:checked + .toggler { background: $blue; &::after { transform: translateX($size); } } .input:checked:focus + .toggler { box-shadow: 0 0 0 1px rgba($blue, 0.5); } .input:disabled + .toggler { background: rgba($grey-blue, 0.6); &::after { opacity: 0.5; } } .input:checked:disabled + .toggler { background: rgba($blue, 0.5); } }