@charset "utf-8";


.tf-target{
  --translate-x:0px;
  --translate-y:0px;
  --scale-x:1;
  --scale-y:1;
  --rotate:0;
  --rotate-y:0;
  --border:2px dashed #ccc;
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--translate-x,0) , var(--translate-y,0)) scale(var(--scale-x,0),var(--scale-y,0)) rotateY(var(--rotate-y,0)) rotate(var(--rotate,0))   ;
  font-size: 14px;
}
/* .tf-tool{
  transform: translate(var(--translate-x,0) , var(--translate-y,0)) ;
} */


.tf-target{
  /* */
}
.tf-target.tf-on{
  /* outline: 2px solid #abc;
  outline: var(--border);
  outline-offset: 2px; */
  cursor: move;
}

.tf-container{
  font-family: Arial, Helvetica, sans-serif	;
  --border:2px dotted #abc;
  width:0px;
  height:0px;
  /* position: absolute; */
  box-sizing: border-box;
  display: none;
  pointer-events: none;  
}

.tf-container.tf-on{
  display: block;
}

.tf-guide{
  /* border: 2px solid #abc; */
  /* border:var(--border); */
  outline: 2px solid #abc;
  outline: var(--border);
  outline-offset: 2px;
  width: 100px;
  height: 100px;
  position: fixed;
  z-index: 10;

  animation-duration: 1s;
  animation-name: tf-blink-outline;
  animation-iteration-count:infinite;
}

.tf-tool{
  --top:0;
  --left:0;
  top:clamp(80px,var(--top),calc(100vh - 40px - 80px  ));
  left:clamp(20px,var(--left),calc(100vw - 260px ));
  position: fixed;
  z-index: 20;

  max-width:240px;
  margin:0 auto;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  gap: 5px;
}
.tf-btn-group{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);

  border-radius: 0.3em;
  flex:1 0 auto;

}

.tf-btn-group > .tf-btn{
  flex:1 1 0;
  border:2px solid #ccc;
  border-right-width: 0;
}

.tf-btn-group > .tf-btn:first-child{
  /* border-radius: 0.3em 0 0 0.3em; */
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  
}
.tf-btn-group > .tf-btn:last-child{
  /* border-radius: 0 0.3em 0.3em 0; */
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  border-right-width: 2px;
}

.tf-btn{
  cursor: pointer;
  pointer-events: all;
}
.tf-btn:focus{
  outline: 0px solid #000;
}

/* .tf-btn-group-roate{}
.tf-btn-group-scale{}
.tf-btn-group-order{} */
.tf-btn-group-ext{ display: none;}
.tf-container[data-target-ext-tools~="text-anchor"] .tf-btn-group-text-anchor{ display: flex;}


@keyframes tf-blink-outline {
  
  50%{outline-color: #cccccc7e;}
  /* 50%{outline-color: #cba;} */
  /* 75%{outline-color: rgba(0,0,0,0);} */
  
}