// Temporary fix for cssnano bug: https://github.com/cssnano/cssnano/issues/712
// By moving center to last value in `background-position` property
// See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2599
@if $enable-validation-icons {
  .form-control {
    .was-validated &:invalid,
    .was-validated &:valid,
    &.is-invalid,
    &.is-valid {
      background-position: right $input-height-inner-quarter center;
    }
  }
}

// Bootstrap v4.x does not have special styling for color input
// So we define some basic styles to compensate
input[type="color"].form-control {
  height: $input-height;
  // We use the smaller padding to make the color block larger
  padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2);
}

input[type="color"].form-control.form-control-sm,
.input-group-sm input[type="color"].form-control {
  height: $input-height-sm;
  // We use the smaller padding to make the color block larger
  padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2);
}

input[type="color"].form-control.form-control-lg,
.input-group-lg input[type="color"].form-control {
  height: $input-height-lg;
  padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2);
}

input[type="color"].form-control:disabled {
  // Disabled styling needs to be a bit different than regular inputs
  background-color: $gray-500;
  opacity: $btn-disabled-opacity;
}

// --- Base `.input-group > .custom-range` styling (no PR yet on Bootstrap v4) ---
.input-group {
  > .custom-range {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;

    + .form-control,
    + .form-control-plaintext,
    + .custom-select,
    + .custom-range,
    + .custom-file {
      margin-left: -$input-border-width;
    }
  }

  > .form-control,
  > .form-control-plaintext,
  > .custom-select,
  > .custom-range,
  > .custom-file {
    + .custom-range {
      margin-left: -$input-border-width;
    }
  }

  > .custom-range:focus {
    z-index: 3;
  }

  > .custom-range {
    &:not(:last-child) {
      @include border-right-radius(0);
    }
    &:not(:first-child) {
      @include border-left-radius(0);
    }
  }

  > .custom-range {
    height: $input-height;
    padding: 0 $input-padding-x;
    background-color: $input-bg;
    background-clip: padding-box;
    border: $input-border-width solid $input-border-color;
    height: $input-height;

    @if $enable-rounded {
      border-radius: $input-border-radius;
    } @else {
      border-radius: 0;
    }

    @include box-shadow($input-box-shadow);
    @include transition($input-transition);
    // Bootstrap v4.3.2 has deprecated this mixin
    // @include form-control-focus();
    // So we manually add its content here
    &:focus {
      color: $input-focus-color; // only needed for fallback to text input
      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;
      }
    }

    &:disabled,
    &[readonly] {
      background-color: $input-disabled-bg;
    }
  }
}

.input-group-lg > .custom-range {
  height: $input-height-lg;
  padding: 0 $input-padding-x-lg;
  @include border-radius($input-border-radius-lg);
}

.input-group-sm > .custom-range {
  height: $input-height-sm;
  padding: 0 $input-padding-x-sm;
  @include border-radius($input-border-radius-sm);
}

// --- <b-form-input>: custom-range validation styling - valid (no PR yet for Bootstrap v4.2) ---
// Mixin for generating `.input-group .custom-range` validation styling
@mixin bv-custom-range-validation-state($state, $color) {
  .input-group .custom-range {
    .was-validated &:#{$state},
    &.is-#{$state} {
      border-color: $color;

      &:focus {
        border-color: $color;
        box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
      }
    }
  }

  .custom-range {
    .was-validated &:#{$state},
    &.is-#{$state} {
      // Pseudo-elements must be split across multiple rulesets to have an affect
      &:focus {
        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
        }
        &::-moz-range-thumb {
          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
        }
        &::-ms-thumb {
          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
        }
      }

      &::-webkit-slider-thumb {
        background-color: $color;
        background-image: none;

        &:active {
          background-color: lighten($color, 35%);
          background-image: none;
        }
      }

      &::-webkit-slider-runnable-track {
        background-color: rgba($color, 0.35);
      }

      &::-moz-range-thumb {
        background-color: $color;
        background-image: none;

        &:active {
          background-color: lighten($color, 35%);
          background-image: none;
        }
      }

      &::-moz-range-track {
        background: rgba($color, 0.35);
      }

      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }

      &::-ms-thumb {
        background-color: $color;
        background-image: none;

        &:active {
          background-color: lighten($color, 35%);
          background-image: none;
        }
      }

      &::-ms-track-lower {
        background: rgba($color, 0.35);
      }
      &::-ms-track-upper {
        background: rgba($color, 0.35);
      }
    }
  }
}

@include bv-custom-range-validation-state("valid", $form-feedback-valid-color);
@include bv-custom-range-validation-state("invalid", $form-feedback-invalid-color);