// 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 BS 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);
    @include form-control-focus();

    &: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 BS 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, .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); }
      &::-moz-range-thumb { }

      ~ .#{$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);