@vc-range-height: 4px;
@vc-range-thumb-size: 14px;
@vc-range-not-active-color: #bdcbd1;

.wpb-range-container {
  position: relative;
  display: flex;
  gap: 10px;

  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    cursor: pointer;
    background: transparent;
    --p: 75%;
    flex-grow: 6;
    flex-basis: 0;
    width: 100%;

    &:focus { outline: none; }

    &::-webkit-slider-runnable-track {
      height: @vc-range-height;
      border-radius: 3px;
      background:
              linear-gradient(@vc_main_color) 0/var(--p) 100% no-repeat,
              linear-gradient(@vc-range-not-active-color) 0/100% 100% no-repeat;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      .range-thumb();
      margin-top: calc((@vc-range-height - @vc-range-thumb-size) / 2);
    }

    &::-moz-range-track {
      height: @vc-range-height;
      background: @vc-range-not-active-color;
      border-radius: 3px;
    }

    &::-moz-range-progress {
      height: @vc-range-height;
      background: @vc_main_color;
      border-radius: 3px;
    }

    &::-moz-range-thumb { .range-thumb(); }
  }

  .range-thumb() {
    width: @vc-range-thumb-size;
    height: @vc-range-thumb-size;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            #fff 0 2.25px,
            @vc_main_color 3.25px 100%
    );
  }

  input[type="number"],
  .vc_param_type_number_arrows {
    max-width: 60px;
    flex-grow: 3;
    flex-basis: 0;
  }

  .wpb-inner-number;
}