blog/src/components/molecules/ThemeSwitch.module.scss

@import 'variables';
@import 'mixins';

.themeSwitch {
  position: relative;
  display: inline-block;
  margin-right: $spacer;
  opacity: 0.75;
  bottom: -0.1rem;

  svg {
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.05rem;
    fill: $brand-grey-light;

    &:last-child {
      margin-top: -0.1rem;
      width: 0.7rem;
      height: 0.7rem;
    }
  }
}

.checkboxContainer {
  display: flex;
  align-items: center;
}

$knob-size: 8px;
$knob-space: 1px;

.checkboxFake {
  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 0.2s $easing;
    transform: translate3d(0, 0, 0);
  }
}

.checkbox {
  position: relative;
  cursor: pointer;

  [type='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 {
      + .checkboxContainer {
        .checkboxFake {
          &::after {
            transform: translate3d(100%, 0, 0);
          }
        }
      }
    }
  }
}