svg {
	font-family: var(--label-font-family);
	text-shadow: var(--label-text-shadow);
	text {
		fill: var(--grey-lighter);
	}
}

.label {
	transform-origin: center center;
	animation-iteration-count: infinite;

	font-size: var(--label-font-size);
	text-anchor: middle;
	vertical-align: middle;

	// --- Uptime Status ---

	&.status-down {
		fill: var(--status-down-fill);
		animation-timing-function: ease-in;
		animation-duration: 1.1s;
		animation-name: shake;
	}

	&.status-deploying {
		fill: var(--white);
	}

	// --- Relationships ---

	&[data-rel="is-source"] {
		fill: var(--red);
	}

	&[data-rel="is-deep-source"] {
		fill: var(--orange);
	}

	&[data-rel="is-target"] {
		fill: var(--yellow-darker);
	}

	&[data-rel="has-no-relationship"] {
		fill: var(--navy-lighter);
	}

	&[data-hidden="1"] {
		fill: var(--graph-bg-color);
	}

	&[data-rel="is-same-node"] {
		fill: var(--white);
	}
}