/* COULEUR POUR LE GRAPH SVG */
$svg-blue: #3366CC;
$svg-red: #DC3912;
$svg-yellow: #FF9900;
$svg-green: #109618;
$svg-purple: #990099;
$svg-lightblue: #0099C6;
$svg-lightred: #DD4477;
$svg-lightyellow: #F1CA3A;
$svg-lightgreen: #AAAA11;
$svg-lightpurple: #994499;

svg {

	width: 100%;
	height: 30vh;
	margin: 10px;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */

	path {
		fill: none;
		fill-rule: evenodd;

		stroke: rgb(0, 0, 0);
		stroke-width: 1px;
		stroke-linecap: butt;
		stroke-linejoin: miter;
		stroke-opacity: 1;

		&.precision {
			stroke-width: 0.2px;
		}
	}

	rect.hiding {
		width: 0;
	}

	rect {
		transition: width 0.75s;
		cursor: pointer;

		color: rgb(0, 0, 0);
		clip-rule: nonzero;
		display: inline;
		overflow: visible;
		visibility: visible;
		opacity: 1;
		isolation: auto;
		mix-blend-mode: normal;

		color-interpolation: sRGB;
		color-interpolation-filters: linearRGB;

		fill-opacity: 1;
		fill-rule: nonzero;

		stroke: none;
		stroke-width: 1px;
		stroke-linecap: butt;
		stroke-linejoin: miter;
		stroke-miterlimit: 4;
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		stroke-opacity: 1;

		color-rendering: auto;
		image-rendering: auto;
		shape-rendering: auto;
		text-rendering: auto;
	}

	text {
		text-anchor: end;

		&.precision {
			text-anchor: middle;
			fill: #666666;
			font-size: 13px;
		}
	}

	.blue {
		fill: $svg-blue
	}

	.red {
		fill: $svg-red
	}

	.yellow {
		fill: $svg-yellow
	}

	.green {
		fill: $svg-green
	}

	.purple {
		fill: $svg-purple
	}

	.lightblue {
		fill: $svg-lightblue
	}

	.lightred {
		fill: $svg-lightred
	}

	.lightyellow {
		fill: $svg-lightyellow
	}

	.lightgreen {
		fill: $svg-lightgreen
	}

	.lightpurple {
		fill: $svg-lightpurple
	}
}