Yrkki/cv-generator-fe

@import "./color.scss";
@import "./geometry.scss";

$button-width: $button-height;

.switch {
  position: relative;
  display: inline-block;
  width: ($button-width + $margin) * 2;
  height: $button-height + $margin * 2;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $off-color;
  @include transition();
}

.slider::before {
  position: absolute;
  content: "";
  width: $button-width;
  height: $button-height;
  left: $margin;
  bottom: $margin;
  background-color: $highlight-color;
  @include transition();
}

input:checked + .slider {
  background-color: $on-color;
}

input:focus + .slider {
  box-shadow: 0 0 1px $on-color;
}

@each $color, $on-color-color in $on-colors {
  .slider-#{$color} {
    @extend .slider;
  }
  input:checked + .slider-#{$color} {
    background-color: $on-color-color;
  }
  input:focus + .slider-#{$color} {
    box-shadow: 0 0 1px $on-color-color;
  }
}

input:checked + .slider::before {
  $delta: $button-width - $margin;
  -webkit-transform: translateX($delta);
  -ms-transform: translateX($delta);
  transform: translateX($delta);
}

.slider.round {
  @include border-radius($button-height + $margin * 2);
}

.slider.round::before {
  @include border-radius(50%);
}