.uex-input-range {
  .form-group {
    &.is-focused {
      background: rgba(#FFFFFF, .15);
    }

    input[type=range] {
      width: 100%;
      height: $input-height-sm;
      -webkit-appearance: none;
      margin: 0;

      @each $attr in ('-moz-range-track', '-ms-track', '-webkit-slider-runnable-track') {
        &::#{unquote($attr)} {
          width: $uex-form-input-range-slider-width;
          height: $uex-form-input-range-slider-height;
          cursor: pointer;
          box-shadow: $uex-form-input-range-slider-box-shadow;
          background: $uex-form-input-range-slider-background;
          border-radius: $uex-form-input-range-slider-border-radius;
          border: $uex-form-input-range-slider-border;
          transition: all .3s;
        }
      }

      @each $attr in ('-webkit-slider-thumb', '-moz-range-thumb', '-ms-thumb') {
        &::#{unquote($attr)} {
          width: $uex-form-input-range-slider-thumb-width;
          height: $uex-form-input-range-slider-thumb-height;
          box-shadow: $uex-form-input-range-slider-thumb-box-shadow;
          border: $uex-form-input-range-slider-thumb-border;
          border-radius: $uex-form-input-range-slider-border-radius;
          background: $uex-form-input-range-slider-thumb-background;
          cursor: pointer;
          transition: all .3s;

          &:not(:disabled):hover {
            background: $uex-form-input-range-slider-thumb-background-focus;
            border: $uex-form-input-range-slider-thumb-border-focus;
          }
          &:not(:disabled):focus {
            background: $uex-form-input-range-slider-thumb-background-focus;
            border: $uex-form-input-range-slider-thumb-border-focus;
          }
        }
      }
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: ($uex-form-input-range-slider-thumb-height - $uex-form-input-range-slider-height + ($uex-form-input-range-slider-thumb-border-weight * 2)) / -2;
      }
      &::-ms-thumb {
        margin-top: $uex-form-input-range-slider-thumb-border-weight;
      }
      @each $attr in ('-ms-fill-lower', '-ms-fill-upper') {
        &::#{unquote($attr)} {
          background: $uex-form-input-range-slider-background;
          border: $uex-form-input-range-slider-border;
          border-radius: $uex-form-input-range-slider-border-radius * 2;
          box-shadow: $uex-form-input-range-slider-box-shadow;
        }
      }

      &:not(:disabled):focus {
        outline: none;

        @each $attr in ('-webkit-slider-runnable-track', '-ms-fill-lower', '-ms-fill-upper') {
          &::#{unquote($attr)} {
            background: $uex-form-input-range-slider-background-focus;
            border-color: $uex-form-input-range-slider-border-focus;
          }
        }
      }

      &:disabled {
        @each $attr in ('-webkit-slider-thumb', '-moz-range-thumb', '-ms-thumb') {
          &::#{unquote($attr)} {
            background: $uex-form-input-range-slider-thumb-background-disabled;
            border: $uex-form-input-range-slider-thumb-border-disabled;
            cursor: not-allowed;
          }
        }

        @each $attr in ('-webkit-slider-runnable-track', '-ms-fill-lower', '-ms-fill-upper') {
          &::#{unquote($attr)} {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}