toggle.scss

@use "sass:math";
@import "../../../../css/variables.scss";
@import "../../../../css/mixins.scss";

$color: #a3a3a3;
$size: 16px;

.toggle {
  display: inline-block;
  width: 35px;
  height: $size;
  border-radius: $size;
  border: solid 1px $primaryColor;
  background: rgba(100,100,100,0.5);
  cursor: pointer;

  .knob {
    height: ($size - 2);
    width: ($size - 2);
    border-radius: math.div($size - 2, 2);
    margin-top: 1px;
    margin-left: 1px;
    background-color: $primaryColor;

    @include transition(all 0.3s);
  }

  &.active {
    border-color: $orange;

    .knob {
      margin-left: 19px;
      background-color: $orange;
    }
  }
}