$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;

$input-line-height: 1.5 !default;
$input-font-family: $font-family-sans-serif !default;
$input-font-size: 1rem !default;
$input-font-weight: 400;

$input-padding-y: 0.375rem !default;
$input-padding-x: 0.75rem !default;
$input-border-width: 1px !default;
$input-border-color: #e9ecef !default;
$input-color: #495057 !default;
$input-bg: #fff !default;
$input-disabled-bg: #e9ecef;
$input-disabled-text: #cecece;
$input-border-radius: 0.25rem !default;

$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
$input-placeholder-color: #6c757d !default;
$input-box-shadow: inset 0 1px 1px rgba(#000, 0.075) !default;
$input-height: calc(
  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
    2}
);

$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten(#719ece, 25%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: 2px !default;
$input-focus-box-shadow: $input-box-shadow !default;

$enable-shadows: true !default;

$input-success-color: #28a745 !default;
$input-error-color: #dc3545 !default;

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  order: 1;
}

.form-hint {
  font-size: 12px;
}

.form-group {
  width: 100%;
  margin-bottom: 1rem;

  & > div {
    order: 2;
  }

  &--inline {
    flex-direction: row;
    align-items: center;
  }

  .form-error {
    margin-top: 10px;
    font-size: 11px;

    color: $input-error-color;
  }
}

.form-control {
  display: block;
  order: 2;
  width: 100%;
  background-color: $input-bg;
  color: $input-color;
  padding: $input-padding-y $input-padding-x;
  font-family: $input-font-family;
  font-size: $input-font-size;
  font-weight: $input-font-weight;
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;
  box-shadow: $input-box-shadow;

  &--success {
    border-color: $input-success-color !important;
    background-color: lighten($input-success-color, 50);
  }

  &--error {
    border-color: $input-error-color !important;
    background-color: lighten($input-error-color, 40);
  }

  &:not(textarea) {
    height: $input-height;
  }

  // Placeholder
  &::placeholder {
    color: $input-border-color;
    opacity: 1;
  }

  &:disabled,
  &[readonly] {
    background-color: $input-disabled-bg;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }

  &:focus {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    border-color: $input-focus-border-color;
    outline: 0;

    @if $enable-shadows {
      box-shadow: $input-box-shadow, $input-focus-box-shadow;
    } @else {
      box-shadow: $input-focus-box-shadow;
    }
  }
}

.checkbox-control,
.radio-control {
  margin-right: 1rem;
}

.checkbox-label,
.radio-label {
  user-select: none;
  font-size: 0.85rem;
}

.checkbox-control:disabled ~ .checkbox-label {
  pointer-events: none;
  cursor: not-allowed;
  color: $input-disabled-text;
}

.radio-control:disabled ~ .radio-label {
  pointer-events: none;
  cursor: not-allowed;
  color: $input-disabled-text;
}

.custom-form-wrapper {
  order: 2;
}
