<style>
  .disblebutton:disabled {
    background: rgba(0, 60, 136, 0.2);
    cursor: not-allowed;
  }

  .disblebutton:disabled:hover {
    background: rgba(0, 60, 136, 0.2);
    cursor: not-allowed;
  }

  .geocatalogue-restriction {
    position: absolute;
    top: 30px;
    left: -700px;
    float: left;
    width: 290px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99999999;
    background-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.5);
  }
</style>

<div class="row btn-group-vertical btn-for-map">
  <button
    type="button"
    class="btn-restriction-map"
    ng-click="createWidget('Polygon')"
    ng-disabled="selection.tovalidate || selection.startedEdit"
    title="{{ 'rights.restriction.map.createpolygon' | translate }}"
    ng-class="{'btnTrue': selection.Polygon.active,'btnFalse disblebutton':!selection.Polygon.active || selection.tovalidate || selection.startedEdit}"
  >
    <i
      class="fa fa-object-group"
      title="{{ 'rights.restriction.map.createpolygon' | translate }}"
    ></i>
  </button>

  <button
    type="button"
    class="btn-restriction-map"
    ng-click="createWidget('MultiPolygon')"
    title="{{ 'rights.restriction.map.createmultipolygon' | translate }}"
    ng-disabled="selection.tovalidate || selection.startedEdit"
    ng-class="{'btnTrue': selection.MultiPolygon.active , 'btnFalse disblebutton': !selection.MultiPolygon.active || selection.tovalidate || selection.startedEdit}"
  >
    <i
      class="fa fa-object-ungroup"
      title="{{ 'rights.restriction.map.createmultipolygon' | translate }}"
    ></i>
  </button>

  <button
    type="button"
    class="btn-restriction-map"
    ng-click="editFeature()"
    ng-disabled="!selection.result || !selection.result.features || selection.result.features.length === 0 || selection.tovalidate || selection.startedEdit"
    title="{{ 'rights.restriction.map.editFeature' | translate }}"
    ng-class="{ 'disblebutton' : !selection.result || !selection.result.features || selection.result.features.length === 0 || selection.tovalidate || selection.startedEdit}"
  >
    <i
      class="fa fa-edit"
      title="{{ 'rights.restriction.map.editFeature' | translate }}"
    ></i>
  </button>

  <button
    type="button"
    class="btn-restriction-map"
    ng-click="selectObjectsFromMap()"
    ng-disabled="selection.tovalidate || selection.startedEdit"
    ng-class="{ 'disblebutton' : selection.tovalidate || selection.startedEdit }"
    title="{{ 'rights.restriction.map.selectFeatures' | translate }}"
  >
    <i
      class="fa fa-pencil-square"
      title="{{ 'rights.restriction.map.selectFeatures' | translate }}"
    ></i>
  </button>

  <button
    type="button"
    class="btn-restriction-map"
    ng-click="validerSelection()"
    ng-disabled="!selection.tovalidate"
    title="{{ 'rights.restriction.map.valider' | translate }}"
    ng-class="{ 'modified-options-true' : selection.tovalidate , 'modified-options-false disblebutton':!selection.tovalidate}"
  >
    <i
      class="fa fa-check"
      title="{{ 'rights.restriction.map.valider' | translate }}"
    ></i>
  </button>

  <button
    type="button"
    class="btn-restriction-map"
    ng-click="removeSelection()"
    ng-disabled="!selection.tovalidate"
    title="{{ 'rights.restriction.map.annuler' | translate }}"
    ng-class="{'modified-options-true':selection.tovalidate,'modified-options-false disblebutton':!selection.tovalidate}"
  >
    <i
      class="fa fa-remove"
      title="{{ 'rights.restriction.map.annuler' | translate }}"
    >
    </i>
  </button>
  <button
    type="button"
    class="btn-restriction-map"
    ng-click="deleteFeaturesSaved()"
    ng-disabled="!selection.result || !selection.result.features || selection.result.features.length === 0"
    title="{{ 'rights.restriction.map.deleteAllCreatedFeatures' | translate }}"
    ng-class="{'disblebutton': !selection.result || !selection.result.features || selection.result.features.length === 0 }"
  >
    <i
      class="fa fa-trash"
      title="{{ 'rights.restriction.map.deleteAllCreatedFeatures' | translate }}"
    >
    </i>
  </button>
</div>
