@use "./color" as color;
@use "./geometry" as geometry;

$button-width: geometry.$button-height;

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

.switch input {
  display: none;
}

%slider {
  @include geometry.transition;

  position: absolute;
  cursor: pointer;
  inset: 0;
  background: color.$off-color;
}

%slider::before {
  @include geometry.transition;

  position: absolute;
  content: "";
  width: $button-width;
  height: geometry.$button-height;
  left: geometry.$margin;
  bottom: geometry.$margin;
  background-color: color.$highlight-color;
}

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

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

@each $color, $on-color-color in color.$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 - geometry.$margin;

  transform: translateX($delta);
}

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

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