
.placeholder-edit-mode [data-placeholder]
{
	--dash-size: 5px;
	--dash-gap: 1px;
	outline: 0;
	background-image: linear-gradient(to right, currentColor 50%, transparent 50%), linear-gradient(to right, currentColor 50%, transparent 50%), 
	linear-gradient(to bottom, currentColor 50%, transparent 50%), linear-gradient(to bottom, currentColor 50%, transparent 50%);
	background-size: var(--dash-size) var(--dash-gap), var(--dash-size)  var(--dash-gap), var(--dash-gap) var(--dash-size) , var(--dash-gap) var(--dash-size) ;
	background-position: 0 0, 0 100%, 0 0, 100% 0;
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.placeholder-edit-mode [data-placeholder]:hover{
	
	--dash-size: 10px;
	--dash-gap: 1px;
	animation: ant_animation 1s linear infinite; 
}
.placeholder-edit-mode [data-placeholder].active{
	background-image: none;
	box-shadow: 0 0 2px 1px currentColor;
	
} 

#placeholder_toggle_button{
	position: fixed;
	z-index: 10;
	right:0;
	top:50%;
	background: #fff;
	box-shadow: 0 8px  20px rgba(0,0,0, 0.24);
}

#placeholder_toggle_button button {
	border-radius: 0;

}


@keyframes ant_animation {
	0% {
		background-position: 0 0, 0 100%, 0 0, 100% 0;

	}
	100% {
		background-position: 
        20px 0, 
        -20px 100%, 
        0 -20px, 
        100% 20px;
	}
}
