$block = ".klara-ui-switch";
$switch-width = 34px;
$switch-height = 20px;

{$block} {
  display: inline-flex;
  line-height: 1;
}

{$block}__input {
  position: absolute;
  visibility: hidden;

  &:focus {
    + {$block}__wrapper {
      outline: 1px dotted $c-brand-base;
    }
  }
}

{$block}__label-text {
  margin: 0 10px;
  font-size: $font-size-medium;
  user-select: none;
}

{$block}__wrapper {
  position: relative;
  display: inline-flex;
  width: $switch-width;
  height: $switch-height;

  &--disabled {
    cursor: not-allowed;

    {$block}__track, {$block}__knob {
      border-color: $c-gray-light;
      background: $c-gray-lighter;
    }
  }
}

{$block}__track {
  position: absolute;
  width: 100%;
  height: 14px;
  border: 1px solid $c-gray-base;
  border-radius: 3em;
  background: $c-white-base;
  transition: background .2s;

  &--on {
    border-color: $c-brand-base;
    background: $c-brand-light;
  }
}

{$block}__knob {
  position: absolute;
  top: -3px;
  left: 0;
  box-sizing: inherit;
  width: $switch-height;
  height: $switch-height;
  border: 1px solid $c-gray-base;
  border-radius: 50%;
  background: $c-white-base;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
  transition: left .3s;

  &--on {
    right: 0;
    left: .45 * $switch-width;
    border-color: $c-brand-base;
  }
}