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

$button-count: 3;
$border-radius: 50px;

.toggle-radio {
  @include geometry.border-radius($border-radius);

  position: relative;
  background: color.$extra-function-background-color;
  margin: geometry.$margin auto;
  overflow: hidden;
  height: geometry.$button-height + geometry.$margin * 2;
  width: geometry.$margin + geometry.$button-width * $button-count + geometry.$margin;
  padding: geometry.$margin;
}

.toggle-radio>* {
  float: left;
}

.toggle-radio input[type="radio"] {
  display: none;
}

.toggle-radio label {
  @include geometry.border-radius($border-radius);

  z-index: 1;
  display: block;
  width: geometry.$button-width;
  height: geometry.$button-height;
  margin: 0;
  cursor: pointer;
  text-align: center;
}

.toggle-option-slider {
  @include geometry.border-radius($border-radius);
  @include geometry.transition;

  width: geometry.$button-width;
  height: geometry.$button-height;
  position: absolute;
  top: geometry.$margin;
}

#first-toggle:checked~.toggle-option-slider {
  background: color.$highlight-color;
  left: geometry.$margin;
}

#second-toggle:checked~.toggle-option-slider {
  background: color.$highlight-color;
  left: geometry.$margin + geometry.$button-width;
}

#third-toggle:checked~.toggle-option-slider {
  background: color.$highlight-color;
  left: geometry.$margin + geometry.$button-width * 2;
}