.form-control-highlighted {
  border-color: $input-focus-border-color;

  transition: box-shadow 0.3s ease-in-out;
  animation: form-control-highlighted-blink 1s infinite;
}

@keyframes form-control-highlighted-blink {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    @if $enable-shadows {
      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: $input-focus-box-shadow;
    }
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

// Thumb styles
input[type="range"].is-valid::-webkit-slider-thumb {
  background-color: $success; /* Using Bootstrap's success color variable */
}

input[type="range"].is-valid::-moz-range-thumb {
  background-color: $success; /* Using Bootstrap's success color variable */
}

input[type="range"].is-valid::-ms-thumb {
  background-color: $success; /* Using Bootstrap's success color variable */
}

input[type="range"].is-invalid::-webkit-slider-thumb {
  background-color: $danger; /* Using Bootstrap's danger color variable */
}

input[type="range"].is-invalid::-moz-range-thumb {
  background-color: $danger; /* Using Bootstrap's danger color variable */
}

input[type="range"].is-invalid::-ms-thumb {
  background-color: $danger; /* Using Bootstrap's danger color variable */
}

// Track styles
input[type="range"].is-valid::-webkit-slider-runnable-track {
  background-color: lighten($success, 40%); /* Lighter shade of success */
}

input[type="range"].is-valid::-moz-range-track {
  background-color: lighten($success, 40%);
}

input[type="range"].is-valid::-ms-track {
  background-color: lighten($success, 40%);
}

input[type="range"].is-invalid::-webkit-slider-runnable-track {
  background-color: lighten($danger, 40%); /* Lighter shade of danger */
}

input[type="range"].is-invalid::-moz-range-track {
  background-color: lighten($danger, 40%);
}

input[type="range"].is-invalid::-ms-track {
  background-color: lighten($danger, 40%);
}