/* Turtle
*/

* {
	transition: all 0.5s ease-in;
}



.svg-element {
	width: 100vw;
	height: 100vh;

	--turtle: #0a07;
	--turtle-stroke: #0a0f;
}



.graphPaper {
	--teal: #088;
	stroke: var(--teal);
	fill:none;

	#pattern-gridMinor {
		stroke-width: 1px;
		/* stroke-dasharray: 10 10;    dashes */
		/* stroke-dasharray: 10 80 20 80 10;  crosses  */
	}
	.viewBox {
		x: -100%;
		y: -100%;
		width: 200%;
		height: 200%;
	}
	.grid-minor { fill: url(#pattern-gridMinor); }
	.grid-major { fill: url(#pattern-gridMajor); }
	.axis {
		 stroke-width: 2px;
	}
	.origin {
		r:10px;
		stroke-width: 2px;
	}

	.label {
		stroke: none;
		fill: var(--teal);
		text-anchor:end;
		font-size: 25px;
		dominant-baseline: ideographic;
		font-family: monospace;
	}
}


.drawing {
	--draw-colour: #f00;
	stroke: var(--draw-colour);
	fill: var(--draw-colour);
	fill-opacity: 50%;

	stroke-width: var(--drawing-stroke-width);
	stroke-linecap: round;
	stroke-linejoin: miter;
	paint-order: stroke;

	.marker {
		display: none;
	}

	&.show-marker .marker{
		display:inline;
	}

	text {
		text-anchor: middle;
		dominant-baseline: middle;
		font-style:normal;
		stroke:none;
		font-size: calc(10px * var(--drawing-stroke-width));
		fill-opacity:100%;
	}

}

#def-marker {
	--foo: 5;
	--scale-min: 1;

	--scale: max(var(--drawing-stroke-width) /5, var(--scale-min) );
	--scale-temp: calc(var(--drawing-stroke-width) /5 );

	stroke-width: 0px;

	scale: var(--scale);

	/* d: path('m0,-30 L10,10 L-10 10 z'); */

	&:hover {
		scale: calc(var(--scale) * 1.8);
	}
}



.turtle {
	fill: var(--turtle);
	stroke: var(--turtle-stroke);
	stroke-width: 3px;
	filter: drop-shadow(0px 0px 30px #ff07);

	.head { fill: var(--turtle-stroke); }
	.feet { fill: var(--turtle-stroke); }
	.eyes { fill: yellow; stroke:none;}

	--size: 10;
	--body: calc(var(--size) * 4px);
	--head: calc(var(--size) * 2px);
	--foot: calc(var(--size) * 1px);
	--eye: calc(var(--size) * 0.5px);

	--threeFifths: calc((3/5) * var(--size) * 4px);
	--fourFifths:  calc((4/5) * var(--size) * 4px);

	/* I could have done most of this with a transform... */

	&:hover {
		--size:15;
	}

	.body { r: var(--body); cx:0px; cy:0px; }
	.head { r: var(--head); cx:0px; cy:calc(-2 * var(--head) ); }
	.el   { r: var(--eye); cx: calc(-2 * var(--eye)); cy:calc(-1.1 * var(--body)); }
	.er   { r: var(--eye); cx: calc(+2 * var(--eye)); cy:calc(-1.1 * var(--body)); }
	.fl   { r: var(--foot); cx:calc(-1 * var(--fourFifths) ); cy:calc(-1 * var(--threeFifths)); }
	.fr   { r: var(--foot); cx:calc(+1 * var(--fourFifths) ); cy:calc(-1 * var(--threeFifths)); }
	.bl   { r: var(--foot); cx:calc(-1 * var(--threeFifths) ); cy:calc(+1 * var(--fourFifths)); }
	.br   { r: var(--foot); cx:calc(+1 * var(--threeFifths) ); cy:calc(+1 * var(--fourFifths)); }
}