.tracker {
	display: flex;
	flex-direction: column;
	height: 100vh;
	align-items: stretch;
	justify-content: flex-start;

	.auto-tracking {
		.custom-toggle {
			vertical-align: middle;
		}
	}
	.canvas {
		width: 100%;
		height: auto;
		max-height: 100%;
	}
	.dungeons {
		.count-display,
		.dungeon-tag {
			font-size: 0.45px;
			font-weight: bold;
			fill: white;
			stroke: black;
			stroke-width: 0.2px;
			stroke-linejoin: round;
			paint-order: stroke fill;
			dominant-baseline: middle;
			text-anchor: middle;
			pointer-events: none;
			user-select: none;
			&.is-zero {
				display: none;
			}
			&.is-full {
				fill: green;
			}
		}
		.count-display {
			font-size: 0.65px;
			stroke-width: 0.3px;
		}
	}
	.items {
		.med-display {
			font-size: 0.3px;
			font-weight: bold;
			fill: white;
			stroke: black;
			stroke-width: 0.15px;
			stroke-linejoin: round;
			paint-order: stroke fill;
			pointer-events: none;
			&.bottom-left {
				transform: translate(-0.5px, 0.4px);
			}
			&.bottom-right {
				transform: translate(0.1px, 0.4px);
			}
		}
	}
	.tracker-map {
		.location {
			.box {
				width: 0.04px;
				height: 0.04px;
				transform: translate(-0.02px, -0.02px);
				fill: #0d0;
				stroke: black;
				stroke-width: 1px;
				vector-effect: non-scaling-stroke;
			}
			.text {
				fill: black;
				font-size: 0.02px;
				font-weight: bold;
				text-anchor: middle;
				dominant-baseline: middle;
				pointer-events: none;
				user-select: none;
			}
			&.status-cleared {
				.box {
					fill: grey;
					opacity: 0.4;
				}
			}
			&.status-partial {
				.box {
					fill: yellow;
				}
			}
			&.status-unavailable {
				.box {
					fill: red;
				}
			}
			&.size-lg {
				.box {
					width: 0.08px;
					height: 0.08px;
					transform: translate(-0.04px, -0.04px);
				}
				.text {
					font-size: 0.04px;
				}
			}
			&.clickable {
				.box:hover {
					stroke: white;
				}
			}
		}
	}
	.toggle-icon {
		&.inactive {
			opacity: .5;
		}
	}
	.tracker-toolbar {
		label .zelda-icon,
		.toggle-icon {
			display: inline-block;
			width: 2em;
			height: 2em;
		}
		.form-select {
			background-image: none;
			padding-right: 0.75rem;
			border: none;
		}
	}
	.zelda-icon {
		width: 100%;
		height: 100%;
	}
}