.btn{
  --c1Btn: var(--color1);
  --c2Btn: var(--color2);
  text-align: center;
  padding-top: 3px;
  margin-bottom: 1rem;
}

.btn>.bg_choice{background:var(--c1Btn); border: 1px solid var(--c1Btn);display: inline-block; width: auto; height: auto; min-height: 0;padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; line-height: 0}
.btn .buttonP{margin-bottom: 0;display: inline-block;text-decoration: none;z-index: 2;cursor: pointer; outline: none;position: relative;
  padding: 0.5em 1.2em; color: var(--c2Btn);}


.btn>.bg_choice[style*="border-radius"] .buttonP, .btn>.bg_choice[style*="border-radius"] .BgColorOverImg{border-radius:inherit; overflow: hidden}


.btn .buttonP::after{content: " ";display: block;position: absolute; top: 0;left: 0; width: 100%;height: 100%; }
.btn .buttonP::after{transition: all 0.3s; background: var(--c2Btn); z-index: -1; height: 0;}
.btn .buttonP::before{ background: transparent ;z-index: -2;}
.btn .buttonP a::after{cursor: pointer;content:"";display: block;position: absolute; top: -20vh; bottom:-20vh;left:-20vh; right: -20vh;}
.btn .buttonP a{color: inherit; text-decoration: none;}
.btn>.bg_choice:hover{ border: 1px solid transparent;}
.btn .buttonP:hover::after,
.btn.mouseover .buttonP::after{height: 100%;}
.btn .buttonP:hover{color:var(--c1Btn)}

.btn.shapeChange[data-shape="1"]{
  --c1Btn: var(--color2);
  --c2Btn: var(--color1);
}

.btn.shapeChange[data-shape="2"]{mix-blend-mode: hard-light;}
.btn.shapeChange[data-shape="2"] .bg_choice{background:transparent; border-color: var(--c2Btn);}
.btn.shapeChange[data-shape="2"] .buttonP:hover,
.btn.mouseover .buttonP{ color:grey}



.editableZone .btn .centrage::after{content: "\f061"}
.editableZone .btn .alignementBtn{position: absolute; bottom: 0;left: 50%; transform: translateX(-50%);display: none;}
.editableZone .btn.hover .alignementBtn{display: block;}
.editableZone .btn .alignementBtn i{margin: 0 10px; cursor: pointer; color: #931D86;text-shadow: 1px 1px #FFF, -1px -1px #FFF, -1px 1px #FFF, 1px -1px #FFF;}

.btn.shapeChange[data-shape="3"],
.btn.shapeChange[data-shape="4"]{mix-blend-mode: hard-light;}
.btn.shapeChange[data-shape="3"] .bg_choice,
.btn.shapeChange[data-shape="4"] .bg_choice{background:transparent; border-radius: 0 !important; border:none}
.btn.shapeChange[data-shape="3"] .bg_choice:before,.btn.shapeChange[data-shape="3"] .bg_choice:after,
.btn.shapeChange[data-shape="4"] .bg_choice:before,.btn.shapeChange[data-shape="4"] .bg_choice:after{
 content:'';position: absolute;inset: 0;transition: 0.5s; opacity: 0}

.btn.shapeChange[data-shape="3"] .bg_choice:before,.btn.shapeChange[data-shape="3"] .bg_choice:after{
  background: linear-gradient(45deg, var(--color3), #FFF, var(--color4))}
.btn.shapeChange[data-shape="4"] .bg_choice:before,.btn.shapeChange[data-shape="4"] .bg_choice:after{
  background: linear-gradient(45deg, var(--color3), #000, var(--color4))}
.btn.shapeChange[data-shape="3"] .bg_choice:hover:before,
.btn.shapeChange[data-shape="4"] .bg_choice:hover:before,
.btn.shapeChange[data-shape].mouseover .bg_choice:before{inset: -3px;opacity: 1}
.btn.shapeChange[data-shape="3"] .bg_choice:hover:after,
.btn.shapeChange[data-shape="4"] .bg_choice:hover:after,
.btn.shapeChange[data-shape].mouseover .bg_choice:after{opacity: 1;inset: -3px;filter: blur(10px);}
.btn.shapeChange[data-shape="3"] .bg_choice p,
.btn.shapeChange[data-shape="4"] .bg_choice p{background: grey;color: #FFF;border: 1px solid rgba(255,255,255, 0.2);overflow: hidden;}
.btn.shapeChange[data-shape="4"] .bg_choice p{color: #000;border: 1px solid rgba(0,0,0, 0.2);}
.btn.shapeChange[data-shape="3"] .bg_choice p::before,
.btn.shapeChange[data-shape="4"] .bg_choice p::before{
  content:'';position: absolute;top: 0;left: -70%;width: 100%;height: 100%;background: #FFF;opacity:0.25;transform: skew(25deg);transition-property: width;transition-duration: 0.3s;}
.btn.shapeChange[data-shape="4"] .bg_choice p::before{background: #000;}
.btn.shapeChange[data-shape="3"] .bg_choice:hover p::before,
.btn.shapeChange[data-shape="4"] .bg_choice:hover p::before,
.btn.shapeChange[data-shape].mouseover .bg_choice p:before{width: 200%;}
.btn.shapeChange[data-shape="3"] .bg_choice p::after,
.btn.shapeChange[data-shape="4"] .bg_choice p::after{display: none;}



.btn.mixbend{mix-blend-mode: hard-light;}

.btn.mixbend{position: absolute !important;}
.editableZone .mixbend{pointer-events: none}
.btn.cloned{opacity: 0}
.btn.cloned.currenItem{opacity: 1}
/*.btn.cloned .buttonP::before, .btn.cloned .buttonP::after{display: none;}*/