.form-check {
  position: relative;
  padding-left: $input-padding-left;

  > input[type="checkbox"] {
    -webkit-appearance:none;/* Hides the default checkbox style */
    height: $input-4d-options-dimension;
    width: $input-4d-options-dimension;
    border: $input-4d-options-border-width solid var(--leap-border-color);
    background-color: $white;
    outline: none;
    margin: 0;
    left: 0;
    position: absolute;
    cursor: pointer;
  }

  > input[type="checkbox"] {
      border-radius: $input-4d-checkbox-border-radius;

      @if $enable-transitions {
        transition: box-shadow .15s ease-in-out;
      }

      &:before {
        position: absolute;
        top: -0.0625rem;
        left: -0.0625rem;
        line-height: 0.6;
        font-size: 0.97rem;
        text-align: center;
      }

      &:checked {
        background-color: $input-4d-checkbox-checked-bg-color;
        border-color: $input-4d-checkbox-checked-border-color;

        &:focus, &:active {
          border-color: var(--leap-primary-color);
          box-shadow: var(--leap-input-box-shadow);
        }
      }

      &:checked:before {
        content: '';
        width: $input-4d-options-dimension;
        height: $input-4d-options-dimension;
        background-repeat: none;
        background-position: center center;
        background-image: $custom-checkbox-indicator-icon-checked;
      }

      &:disabled {
        cursor: not-allowed;
      }

      &:hover {
        border-color: $input-4d-checkbox-hover-border-color;
        box-shadow: $input-4d-checkbox-hover-boxshadow;
        color: $input-4d-checkbox-hover-text-color;
      }

      &:active {
        background-color: $input-4d-checkbox-active-bg-color;
        border-color: $input-4d-checkbox-active-border-color;
        color: var(--leap-primary-color);
      }

      &:not(.form-check-inline) {
        top: $input-4d-options-top;
      }
  }
}