.lists{padding-left: 5em;list-style: disc; padding-top: 10px}
.lists .list{text-align: left; display: list-item;}

.lists.shapeChange[data-shape="2"]{list-style: none;padding-left: 7em;}
.lists.shapeChange[data-shape="2"] .list{
  --sizeList: 1em;
  --colorList:currentColor;
   position: relative;}
.lists.shapeChange[data-shape="2"] .list::before {
  content: "";position: absolute;
  top: 0;left: calc(-2 * var(--sizeList));
  width: calc(var(--sizeList) + 5px);height: calc(var(--sizeList) + 5px);
  border-radius: 50%;border:1px solid var(--colorList);
}
.lists.shapeChange[data-shape="2"] .list::after {
  content: "";position: absolute;
  top: 6px;left: calc(-2 * var(--sizeList) + 5px);
  width: calc( 0.7 * var(--sizeList));height: calc( 0.35 * var(--sizeList));
  border:2px solid var(--colorList); border-top:none; border-right: none;
  transform-origin:50% 50%;transform: scale(0.8) skew(0deg,-15deg) rotate(-43deg);
}
.editableZone .lists.shapeChange[data-shape="2"] .list:hover::after{transform: none}

.lists.shapeChange[data-shape="1"]{counter-reset: countList; list-style: none;padding-left: 7em;}
.lists.shapeChange[data-shape="1"] .list{
  --sizeList: 1em;
  --colorList:currentColor;
  counter-increment: countList; position: relative;}
.lists.shapeChange[data-shape="1"] .list::before {
  content: counter(countList);position: absolute;
  font-weight: bold;font-size: calc(var(--sizeList) - 2px);color: var(--colorList); text-align: center;
  top: 0;left: calc(-2 * var(--sizeList));
  line-height: calc(var(--sizeList) + 5px);width: calc(var(--sizeList) + 5px);height: calc(var(--sizeList) + 5px);
  border-radius: 50%;border:1px solid var(--colorList);
}