.toggle-switch {
  .custom-control {
    padding-left: $custom-control-gutter + $toggle-switch-size;
  }

  .custom-control-inline .custom-control-input {
    width: $toggle-switch-size;
    height: ($font-size-base * $line-height-base + $toggle-switch-size) / 2;
  }

  .custom-control-label {
    // Background-color and (when enabled) gradient
    &::before {
      top: ($font-size-base * $line-height-base - $toggle-switch-size) / 2;
      left: -($custom-control-gutter + $toggle-switch-size);
      width: $toggle-switch-size;
      height: $toggle-switch-size;
      border: $toggle-switch-border-color solid $custom-control-indicator-border-width;
    }

    // Foreground (icon)
    &::after {
      top: ($font-size-base * $line-height-base - $toggle-switch-size) / 2;
      left: -($custom-control-gutter + $toggle-switch-size);
      width: $toggle-switch-size;
      height: $toggle-switch-size;
    }

    &:hover {
      &::before {
        box-shadow: $toggle-focus-box-shadow;
      }
    }
  }

  .custom-switch {
    padding-left: $toggle-switch-width + $custom-control-gutter;

    .custom-control-label {
      &::before {
        left: -($toggle-switch-width + $custom-control-gutter);
        width: $toggle-switch-width;
        border-radius: $toggle-switch-border-radius;
      }

      &::after {
        top: add(
          ($font-size-base * $line-height-base - $toggle-switch-size) / 2,
          $custom-control-indicator-border-width * 2
        );
        left: add(-($toggle-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
        width: $toggle-switch-indicator-size;
        height: $toggle-switch-indicator-size;
        background-color: $toggle-switch-border-color;
        border-radius: $toggle-switch-border-radius;
        @include transition(transform 0.15s ease-in-out, $custom-forms-transition);
      }
    }

    .custom-control-input:checked ~ .custom-control-label {
      &::after {
        background-color: $custom-control-indicator-bg;
        transform: translateX($toggle-switch-width - $toggle-switch-size);
      }
    }
  }
}