.form-check {
  padding-left: $input-4d-options-to-text-whitespace;
}

.form-check, .form-check-inline {
  position: relative;

  > input[type="checkbox"],
  > input[type="radio"] {
    -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 $input-4d-checkbox-default-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 $is-sirius {
        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: $input-4d-checkbox-active-border-color;
          box-shadow: $input-btn-focus-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: $input-4d-checkbox-active-text-color;
      }

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

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

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

      &:before {
        position: absolute;
        $top: $input-4d-radio-tick-dimension / 2;
        top: calc(50% - #{$top});
        left: calc(50% - #{$top});
        width: $input-4d-radio-tick-dimension;
        height: $input-4d-radio-tick-dimension;
        border-radius: 50%;
        background-color: $input-4d-radio-default-border-color;
      }

      &:checked {
        background-color: $input-4d-checkbox-checked-bg-color;
        &:before {
          content: '';
          background-color: $input-4d-radio-active-bg-color;
        }
        &:focus, &:active {
          box-shadow: $input-btn-focus-box-shadow;
        }
      }

      &:disabled {
        cursor: not-allowed;
      }

      &:hover {
        border-color: $input-4d-radio-hover-border-color;
        &:before {
          background-color: $input-4d-radio-hover-text-color;
        }
      }

      &:active {
        border-color: $input-4d-radio-active-border-color;
        &:before {
          background-color: $input-4d-radio-active-text-color;
        }
      }

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

.form-check-inline {
  margin-right: 0;
  & ~ & {
    margin-left: $form-check-inline-margin-x;
  }
  input[type="checkbox"].form-check-input, input[type="radio"].form-check-input {
    margin-right: 0;
  }
}