<!-- Container -->
<div class="wcpt-editor-row-option wcpt-toggle-options wcpt-row-accordion" wcpt-model-key="[id]">
  <span class="wcpt-toggle-label">
    <?php echo wcpt_icon('paint-brush'); ?>
    Style for Container
    <?php echo wcpt_icon('chevron-down'); ?>
  </span>

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

  <!-- font-weight -->
  <div class="wcpt-editor-row-option">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="200">Light</option>
    </select>
  </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>

  <!-- 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>

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

  <!-- border color on hover -->
  <div class="wcpt-editor-row-option">
    <label>Border color on hover</label>
    <input type="text" wcpt-model-key="border-color:hover" class="wcpt-color-picker">
  </div>

  <!-- padding -->
  <div class="wcpt-editor-row-option">
    <label>Padding</label>
    <div class="wcpt-flex-option-container">
      <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>

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

</div>

<!-- Menu -->
<div class="wcpt-editor-row-option wcpt-toggle-options wcpt-row-accordion" wcpt-model-key="[id] > .wcpt-dropdown-menu">
  <span class="wcpt-toggle-label">
    <?php echo wcpt_icon('paint-brush'); ?>
    Style for Menu list
    <?php echo wcpt_icon('chevron-down'); ?>
  </span>

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

  <!-- font-weight -->
  <div class="wcpt-editor-row-option">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="200">Light</option>
    </select>
  </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>

  <!-- 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>

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

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

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

  <!-- padding -->
  <div class="wcpt-editor-row-option">
    <label>Padding</label>
    <div class="wcpt-flex-option-container">
      <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>

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

</div>