@mixin apply-checkbox-toggle-size($height: 24px, $width: 50px, $spacing: 4px) {
  $circle-radius: ($height - ($spacing * 2));

  &.is-checked {
    .form-element__checkbox-toggle {
      &-circle {
        transform: translateX(($width - ($circle-radius + $spacing))) translateY($spacing);
      }
    }

    .form-element__checkbox-toggle-bar {
      padding: 0 0 0 ($spacing + 5);
    }
  }

  .form-element__checkbox-toggle-bar {
    height: $height;
    width: $width;
    line-height: $height;
    padding: 0 ($spacing + 5) 0 0;
  }

  .form-element__checkbox-toggle-circle {
    height: $circle-radius;
    width: $circle-radius;
    transform: translateX($spacing) translateY($spacing);
  }
}

.form-element__checkbox-toggle {
  @include apply-checkbox-toggle-size();

  position: relative;
  cursor: pointer;

  &.is-checked {
    .form-element__checkbox-toggle {
      &-bar {
        background-color: $color-green4;
      }
    }
  }

  &:not(.is-checked) {
    text-align: right;
  }

  &-bar {
    color: white;
    background-color: $color-gray4;
    border-radius: 999px;
  }

  &-circle {
    position: absolute;
    background-color: $color-white;
    border-radius: 999px;
    transition: transform .1s ease;
  }
}