<div class="wcpt-editor-row-style-options" wcpt-model-key="style">

  <div class="wcpt-wrapper" wcpt-model-key="[id]">

    <!-- width -->
    <div class="wcpt-editor-row-option">
      <label>Width</label>
      <input type="text" wcpt-model-key="width" />
    </div>

    <!-- min-width -->
    <!-- <div class="wcpt-editor-row-option">
      <label>Min-width</label>
      <input type="text" wcpt-model-key="min-width" />
    </div>   -->

    <!-- text-align -->
    <div class="wcpt-editor-row-option">
      <label>Text align</label>
      <select wcpt-model-key="text-align">
        <option value="">Auto</option>
        <option value="center">Center</option>
        <option value="left">Left</option>
        <option value="right">Right</option>
      </select>
    </div>

    <!-- font-size -->
    <div class="wcpt-editor-row-option">
      <label>Font size</label>
      <input type="text" wcpt-model-key="font-size" placeholder="16px">
    </div>

    <!-- line-height -->
    <div class="wcpt-editor-row-option">
      <label>Line height</label>
      <input type="text" wcpt-model-key="line-height" placeholder="1.2em">
    </div>

    <!-- font-weight -->
    <div class="wcpt-editor-row-option">
      <label>Font weight</label>
      <select wcpt-model-key="font-weight">
        <option value=""></option>    
        <option value="normal">Normal</option>
        <option value="bold">Bold</option>
        <option value="light">Light</option>
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>
        <option value="500">500</option>
        <option value="600">600</option>
        <option value="700">700</option>
        <option value="800">800</option>
        <option value="900">900</option>
      </select>
    </div>

    <!-- font-family -->
    <div class="wcpt-editor-row-option">
      <label>Font family</label>
      <input type="text" wcpt-model-key="font-family">
    </div>    

    <!-- font-color -->
    <div class="wcpt-editor-row-option">
      <label>Font color</label>
      <input type="text" wcpt-model-key="color" placeholder="#000" class="wcpt-color-picker" >
    </div>

    <!-- text-transform -->
    <div class="wcpt-editor-row-option">
      <label>Text transform</label>
      <select wcpt-model-key="text-transform">
        <option value="none">None</option>
        <option value="uppercase">Upper case</option>
        <option value="capitalize">Capitalize</option>
        <option value="lowercase">Lower case</option>
      </select>
    </div>

    <!-- letter-spacing -->
    <div class="wcpt-editor-row-option">
      <label>Letter spacing</label>
      <input type="text" wcpt-model-key="letter-spacing" placeholder="0px" >
    </div>

    <!-- background-color -->
    <div class="wcpt-editor-row-option">
      <label>Background color</label>
      <input type="text" wcpt-model-key="background-color" class="wcpt-color-picker" >
    </div>

    <!-- height -->
    <!-- <div class="wcpt-editor-row-option">
      <label>Force height</label>
      <input type="text" wcpt-model-key="height" />
    </div> -->

    <!-- padding -->
    <div class="wcpt-editor-row-option">
      <label>Padding</label>
      <input type="text" wcpt-model-key="padding-top" placeholder="top">
      <input type="text" wcpt-model-key="padding-right" placeholder="right">
      <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
      <input type="text" wcpt-model-key="padding-left" placeholder="left">
    </div>

  </div>

</div>
