// Bootstrap 5 does not include validation styling for .form-range,
// so we add it here to provide contextual state feedback
// Based on the original Bootstrap Vue implementation, updated for Bootstrap 5
@mixin bv-form-range-validation-state($state, $color) {
  .form-range {
    &.is-#{$state} {
      // Pseudo-elements must be split across multiple rulesets to have an effect
      &:focus {
        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, 0.25);
        }
        &::-moz-range-thumb {
          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, 0.25);
        }
      }

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

        &:active {
          background-color: tint-color($color, 70%);
        }
      }

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

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

        &:active {
          background-color: tint-color($color, 70%);
        }
      }

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

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