/**
 * Set custom Autocomplete background color in Chrome
 * (not working with transparent background colors)
 */
 @mixin autofill-color($color, $bg-color) {
  &:-webkit-autofill {
    -webkit-text-fill-color: $color;
    box-shadow: 0 0 0px 1000px $bg-color inset;
    transition: none;   
    &:hover, 
    &:focus {
      -webkit-text-fill-color: $color;
      box-shadow: 0 0 0px 1000px $bg-color inset;
      transition: none;
    }
  }
}

/**
 * Remove Autocomplete styles in Chrome
 * with a trick that the autofill chrome default background-color is set after 5000 seconds
 * (Also working with transparent background colors)
 */
 @mixin autofill($color) {
  &:-webkit-autofill {
    -webkit-text-fill-color: $color;
    transition: background-color 50000s ease-in-out 0s;
   
    &:hover, 
    &:focus {
      -webkit-text-fill-color: $color;
      transition: background-color 50000s ease-in-out 0s;
     
    }
  }
}


/**
 * Custom input colors
 */
@each $color, $value in $theme-colors {
  .form-control.form-control-#{$color} {
    color: $value;
    &::placeholder {
      color: rgba($value, .7);
    }
    &:disabled {
      color: rgba($value, .7);
    }
    @include autofill($value);
  }
  .was-validated {
    .form-control.form-control-#{$color} {
      &:invalid, &.is-invalid {
        color: $form-feedback-invalid-color;
        @include autofill($form-feedback-invalid-color);
        &::placeholder {
          color: $form-feedback-invalid-color;
        }
        &:focus {
          box-shadow: none;
        }
      }
      &:valid, &.is-valid {
        color: $form-feedback-valid-color;
        @include autofill($form-feedback-valid-color);
        &::placeholder {
          color: $form-feedback-valid-color;
        }
        &:focus {
          box-shadow: none;
        }
      }
    }
  }
}

/**
 * Customization on bootstrap`s default form-control
 */
.form-control {
  @include autofill($input-color);

  /**
   * Input without borders
   */
  &.form-control-text {
    border: none;
    padding: 0;
    height: auto;
    background: transparent;
    @include autofill($input-color);
  }
}

/**
 * Custom switch colors
 */
 @each $color, $value in $theme-colors {
  .form-switch.form-switch-#{$color} {
    // Inactive
    .form-check-label {  
      background-color: $value;
    }

    // Inactive and disabled
    .form-check-input:disabled {
      background-color: rgba( $value, .7);
    }

    // Active
    .form-check-input:checked {
      background-color: $value;
    }

    // Active and disabled
    .form-check-input:checked:disabled {
      background-color: rgba( $value, .7);
    }

  }
}