@use 'sass:math';

@mixin toggleSwitch($d: 12px, $m: 2px, $bg: $colorBtnBg) {
  $br: math.div($d, 1.5);

  .c-toggle-switch__slider {
    background: $bg;
    border-radius: $br;
    height: $d + ($m * 2);
    width: $d * 2 + $m * 2;

    &:before {
      // Knob
      border-radius: floor($br * 0.8);
      box-shadow: rgba(black, 0.4) 0 0 2px;
      height: $d;
      width: $d;
      top: $m;
      left: $m;
      right: auto;
    }
  }
}

.c-toggle-switch {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;

  &__control,
  &__label {
    flex: 0 0 auto;
  }

  &__control {
    cursor: pointer;
    overflow: hidden;
    display: block;
  }

  &__slider {
    // Sits within __switch
    display: inline-block;
    position: relative;

    &:before {
      // Knob
      background: $colorBtnFg; // TODO: make discrete theme constants for these colors
      content: '';
      display: block;
      position: absolute;
      transition: transform 100ms ease-in-out;
    }
  }

  &__label {
    margin-left: $interiorMarginSm;
    white-space: nowrap;
  }

  input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked {
      + .c-toggle-switch__slider {
        background: $colorKey; // TODO: make discrete theme constants for these colors
        &:before {
          transform: translateX(100%);
        }
      }
    }
  }

  @include toggleSwitch();
}

.c-toggle-switch--mini {
  @include toggleSwitch($d: 9px, $m: 0px);
}