$input-margin-y: 4px; $custom-input-line-height: 20px; $custom-input-padding-y: 8px; $custom-input-padding-x: 12px; $custom-input-file-label-padding: 8px;

// general form-control class for inputs (text, password, email, etc) .#{$prefix}form-control {

padding: $custom-input-padding-y $custom-input-padding-x;
margin-top: $input-margin-y;
margin-bottom: $input-margin-y;
line-height: $custom-input-line-height;
color: $dark;

&:hover:not(:disabled):not([readonly]) {
  border: 1px solid $input-focus-border-color;
}

&:disabled,
&[readonly] {
  color: $muted;
  cursor: not-allowed;
  background-color: $cloud;
  border-color: $smoke;
  outline: none;
  box-shadow: none;
}

&:focus:not(:disabled):not([readonly]) {
  color: $dark;
}

&.prefix-icon {
  padding-left: 36px;
}

&.suffix-icon {
  padding-right: 36px;
}

&.with-reset-icon, // will be deprecated in future version
&.suffix-icon--double {
  padding-right: 36px;
  &.suffix-icon:hover {
    padding-right: 72px;
  }
}

&.is-invalid,
&:invalid {
  border-color: $danger;
}

}

//plain text class .#{$prefix}form-control-plaintext {

&:focus {
  outline: none;
  box-shadow: none;
}

}

// supress magrin on .#{$prefix}form-group labels .#{$prefix}form-group {

label {
  margin-bottom: 0;
}

}

// supress margin on labels inside form-row .#{$prefix}form-row {

label {
  margin-bottom: 0;
}

}

.#{$prefix}custom-select, .#{$prefix}custom-file-input {

height: $input-height;
padding: $custom-select-padding-y 8px $custom-select-padding-y 12px;
margin: $input-margin-y 0;
line-height: $custom-input-line-height;
color: $dark;

&:hover:not(:disabled) {
  cursor: pointer;
  border: 1px solid $input-focus-border-color;
}

&:focus {
  box-shadow: $input-focus-box-shadow;
}

&:disabled {
  color: $muted;
  cursor: not-allowed;
  background-color: $cloud;
  border-color: $smoke;
}

&:not(:focus):invalid {
  color: $text-muted;
}

}

// custom file input input { // stylelint-disable-line selector-no-qualifying-type

cursor: pointer;

} input::-webkit-file-upload-button { // stylelint-disable-line selector-no-qualifying-type

cursor: pointer;

} .#{$prefix}custom-file {

display: flex;
flex-wrap: wrap;
align-items: center;
height: auto;
margin-bottom: 20px;
&:hover .#{$prefix}custom-file-label::before {
  border: 1px solid $muted;
}
.#{$prefix}form-text {
  margin-top: 4px;
}

} .#{$prefix}custom-file ~ .#{$prefix}custom-file-list-wrapper {

margin-bottom: 12px;

}

.#{$prefix}custom-file-input {

margin: 0;

}

.#{$prefix}custom-file-label {

display: flex;
align-items: flex-end;
height: 38px;
padding: $custom-input-padding-y $custom-input-padding-x;
margin-bottom: 0;
color: $muted;

&::after {
  display: none;
}

// visualize Choose File button
&::before {
  position: relative;
  top: 3px;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 2px 8px;
  margin-right: 12px;
  line-height: $custom-input-line-height;
  color: $slate;
  content: "Choose File";
  background-color: $snow;
  border: 1px solid $smoke;
  // stylelint-disable-next-line property-blacklist
  border-radius: 4px;
}

}

//input text helper for validation, and normal case (form-text) .valid-feedback, .invalid-feedback {

font-size: 12px;

}

.#{$prefix}form-group-label {

margin-bottom: 0;
font-weight: 600;
line-height: $custom-input-line-height;

}

.#{$prefix}custom-control {

margin-bottom: 4px;

}

.#{$prefix}form-group-label + .#{$prefix}custom-control, .#{$prefix}form-group-label + .#{$prefix}custom-file {

margin-top: 4px;

}

//special case for checkbox and radio //checkboxes & radios are to use .#{$prefix}custom-control-input (NOT .#{$prefix}form-check) to have customize checkbox & radio .#{$prefix}custom-control-input {

&:focus {
  box-shadow: $custom-control-indicator-focus-box-shadow;
}

&:hover ~ .#{$prefix}custom-control-label::before {
  cursor: pointer;
  border-color: $input-focus-border-color;
}

&:hover ~ .#{$prefix}custom-control-label::after,
&:hover ~ .#{$prefix}custom-control-label {
  cursor: pointer;
}

&:disabled ~ .#{$prefix}custom-control-label::after{
  cursor: not-allowed;
  border: none;
}

&:disabled ~ .#{$prefix}custom-control-label::before{
  cursor: not-allowed;
  background-color: $cloud !important; // stylelint-disable-line declaration-no-important
  border: 1px solid $smoke !important; // stylelint-disable-line declaration-no-important
}

&:disabled ~ .#{$prefix}custom-control-label{
  cursor: not-allowed;
}

}

.#{$prefix}custom-control-label {

font-weight: 400;
color: $dark;

}

.#{$prefix}custom-checkbox {

.#{$prefix}custom-control-label::before {
  top: 0;
}
.#{$prefix}custom-control-label::after {
  top: 0;
  background: no-repeat 50%;
}
.#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after {
  background: $custom-checkbox-indicator-icon-checked-inverse no-repeat 50%;
}
.#{$prefix}custom-control-input:disabled:indeterminate ~ .#{$prefix}custom-control-label::after {
  background: $custom-checkbox-indicator-icon-indeterminate-inverse no-repeat 50%;
}

}

.#{$prefix}custom-radio {

.#{$prefix}custom-control-label::before {
  top: 1px;
}
.#{$prefix}custom-control-label::after {
  top: 1px;
  background: no-repeat 100% / 100% 50%;
}
.#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after {
  background: $custom-radio-indicator-icon-checked-inverse no-repeat 100% / 100% 50%;
}

}

.#{$prefix}custom-switch {

height: 24px;
padding-left: 52px;
line-height: 24px;
.#{$prefix}custom-control-label {
  &::before {
    top: 0;
    left: -52px;
    width: 40px;
    height: 24px;
    background-color: $smoke;
    border: none;
    border-radius: 24px; // stylelint-disable-line property-blacklist
  }
  &::after {
    top: 2px;
    left: -50px;
    width: 20px;
    height: 20px;
    background-color: $white;
    border-radius: 50%; // stylelint-disable-line property-blacklist
    transition: transform .2s; // stylelint-disable-line property-blacklist
  }
}
.#{$prefix}custom-control-input:checked ~ .#{$prefix}custom-control-label {
  &::before {
    background-color: $link;
  }
  &::after {
    transform: translateX(1rem);
  }
}
@each $color, $value in $theme-colors {
  &.#{$prefix}custom-switch-#{$color} {
    .#{$prefix}custom-control-input:checked ~ .#{$prefix}custom-control-label {
      &::before {
        background: $value;
      }
    }
    .#{$prefix}custom-control-input:not(:disabled):active ~ .#{$prefix}custom-control-label::before {
      background: $value;
    }
    .#{$prefix}custom-control-input:focus ~ .#{$prefix}custom-control-label::before {
      box-shadow: 0 0 0 .2rem lighten($value, 35%);
    }
  }
}
&--small {
  height: 20px;
  padding-left: 48px;
  line-height: 20px;
  .#{$prefix}custom-control-label {
    &::before {
      left: -48px;
      width: 34px;
      height: 20px;
    }
    &::after {
      left: -46px;
      width: 16px;
      height: 16px;
    }
  }
  .#{$prefix}custom-control-input:checked ~ .#{$prefix}custom-control-label {
    &::after {
      transform: translateX(14px);
    }
  }
}

}

// to make sure checkbox & radio have 4px margin bottom .#{$prefix}form-check {

margin-bottom: $input-margin-y;

}

// stylelint-disable-next-line selector-no-qualifying-type textarea.#{$prefix}form-control {

min-width: 184px;
height: 80px;
min-height: 38px;
max-height: 200px;
padding-right: 12px;
padding-left: 12px;
@include scroll-default;

}

// text helper class in Bootstrap .#{$prefix}form-text {

font-size: 12px;
color: $slate;

}

// input groups classess .#{$prefix}input-group {

margin-top: $input-margin-y;
margin-bottom: $input-margin-y;

.#{$prefix}form-control {
  margin-top: 0;
  margin-bottom: 0;
}

.valid-feedback,
.invalid-feedback {
  margin-top: 4px;
}

}

/* stylelint-disable property-no-vendor-prefix */ .#{$prefix}custom-select, .#{$prefix}custom-select-sm {

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

} /* stylelint-enable property-no-vendor-prefix */

.#{$prefix}form-xs {

width: 80px;
max-width: 80px;

}

.#{$prefix}form-sm {

width: 184px;
max-width: 184px;

}

.#{$prefix}form-md {

width: 288px;
max-width: 288px;

}

.#{$prefix}form-lg {

width: 392px;
max-width: 392px;

}

.#{$prefix}form-xl {

width: 600px;
max-width: 600px;

}

.#{$prefix}counter-label {

float: right;
font-weight: $font-weight-normal;

}

.#{$prefix}input-group-text {

display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
@include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);

}

.input-date-picker, // will be deprecated in future version .input-no-readonly {

color: $dark !important; // stylelint-disable-line declaration-no-important
cursor: pointer !important; // stylelint-disable-line declaration-no-important
background-color: $white !important; // stylelint-disable-line declaration-no-important
&:hover:not(:disabled) {
  border: 1px solid $input-focus-border-color;
}

}

.input-with-icon-container { // will be deprecated in future version

position: relative;

}