@supports (--css: variables) {
  input[type="range"].wcpt__multirange {
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    -webkit-appearance: none;
    height: auto !important;
    border: none !important;
    background: transparent;
  }

  input[type="range"].wcpt__multirange:focus {
    outline: none !important;
  }

  input[type="range"].wcpt__multirange {
    position: absolute;
  }

  input[type="range"].wcpt__multirange::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wcpt-range-slider-selected-track-color);
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.1s ease;
  }

  input[type="range"].wcpt__multirange::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }

  input[type="range"].wcpt__multirange::-moz-range-thumb {
    transform: scale(1); /* FF doesn't apply position it seems */
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wcpt-range-slider-selected-track-color);
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.1s ease;
  }

  input[type="range"].wcpt__multirange::-moz-range-thumb:hover {
    transform: scale(1.1);
  }

  input[type="range"].wcpt__multirange::-moz-range-track {
    border-color: transparent; /* needed to switch FF to "styleable" control */
  }

  input[type="range"].wcpt__multirange.ghost {
    position: relative;
    background: var(--track-background);
    --track-background: linear-gradient(
        to right,
        var(--default-color) var(--low),
        var(--range-color) 0,
        var(--range-color) var(--high),
        var(--default-color) 0
      )
      no-repeat 0 45% / 100% 40%;
    --range-color: var(--wcpt-range-slider-selected-track-color);
    --default-color: var(--wcpt-range-slider-unselected-track-color);
  }

  input[type="range"].wcpt__multirange.ghost::-webkit-slider-runnable-track {
    background: var(--track-background);
  }

  input[type="range"].wcpt__multirange.ghost::-moz-range-track {
    background: var(--track-background);
  }

  input[type="range"].wcpt__multirange::-webkit-slider-runnable-track {
    box-shadow: none !important;
  }
}
