.lists{
  --list1px:0.15em;
  --listAlignTop:2.8em;
  --listInterSpaceList:2.5em;
  --listLineHeight:1.4em;
  padding-left: 5em;list-style: disc; padding-top: 0.5em;}
.lists div.list{text-align: left; display: list-item; padding-top: 0; padding-bottom: var(--listInterSpaceList);}
.lists .list>p{margin: 0;
line-height: var(--listLineHeight);
}

.lists:is(.shapeChange[data-shape="3"], .shapeChange[data-shape="4"], .shapeChange[data-shape="5"]){
  --listInterSpaceList:1.25em;
  --listAlignTop:2em;
  --listLineHeight:1em;
}

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

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