@import 'variables'; .themeswitch { position: absolute; top: $spacer / 2; right: $spacer; z-index: 10; .icon { width: .8rem; height: .8rem; margin-top: -.05rem; fill: $brand-grey-light; &:last-child { margin-top: -.1rem; width: .7rem; height: .7rem; } .dark & { fill: $brand-grey; } } } .checkbox__faux-container { display: flex; align-items: center; } $knob-size: 8px; $knob-space: 1px; .checkbox__faux { display: block; position: relative; width: ($knob-size + ($knob-space * 2)) * 2; height: $knob-size + ($knob-space * 4); border: 1px solid $brand-grey-light; border-radius: 15rem; margin-left: $spacer / 3; margin-right: $spacer / 3; &::after { content: ''; position: absolute; top: $knob-space; left: $knob-space; width: $knob-size; height: $knob-size; background-color: $brand-grey-light; border-radius: 15rem; transition: transform .2s $easing; transform: translate3d(0, 0, 0); } .dark & { border-color: $brand-grey; &::after { background-color: $brand-grey; } } } .checkbox { position: relative; cursor: pointer; opacity: .6; .dark & { opacity: .8; } [type='checkbox'], .checkbox__label { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; } [type='checkbox'] { &:checked { + .checkbox__faux-container { .checkbox__faux { &::after { transform: translate3d(100%, 0, 0); } } } } } }