<div class="row">
  <label id="foreground-label"></label>
  <div class="section">
    <div data-value="" class="dropdown-width-container">
      <select class="noselect">
        <option value="Disabled">Disabled</option>
        <option value="Color" selected="selected">Color</option>
        <option value="Bar">Bar</option>
      </select>
    </div>
    <span id="foreground-checkbox" class="reset-default-style-disabled"></span>
  </div>
</div>
<div class="row">
  <label id="color-range-label"></label>
  <div class="color-gradient-container">
    <div style="--sign--color: #161616" class="color-selector">
      <input
        id="fg-color-pos"
        type="color"
        data-value="#338dcd"
        class="parameter pos-color-param"
      /><label for="fg-color-pos" class="color-label">+</label>
    </div>
    <div
      style="
        background: linear-gradient(
          to right,
          #338dcd 0%,
          #338dcd 50%,
          #ff471e 50%,
          #ff471e 100%
        );
      "
      class="color-thermometer"
    ></div>
    <div style="--sign--color: #161616" class="color-selector">
      <input
        id="fg-color-neg"
        type="color"
        data-value="#ff471e"
        class="parameter neg-color-param"
      /><label for="fg-color-neg" class="color-label">-</label>
    </div>
    <span class="reset-default-style-disabled"></span>
  </div>
</div>
<div class="row">
  <label id="background-label"></label>
  <div class="section">
    <div data-value="" class="dropdown-width-container">
      <select class="noselect">
        <option value="Disabled" selected="selected">Disabled</option>
        <option value="Color">Color</option>
        <option value="Gradient">Gradient</option>
        <option value="Pulse">Pulse</option>
      </select>
    </div>
    <span id="background-checkbox" class="reset-default-style-disabled"></span>
  </div>
</div>
