/* ==UserStyle==
@name           Custom Styles for Komodo
@namespace      https://github.com/jerboa88
@version        1.0.0
@author         John Goodliff
@description    A userstyle that adds custom styling for additional features on Komoot.com route planning.
@license        MIT
@homepageURL    https://johng.io/p/komodo
@supportURL     https://github.com/jerboa88/komodo/issues
==/UserStyle== */

@-moz-document domain('www.komoot.com') {
	/* For tag filters */
	.komodo-tag-filter {
		/* Add symbols before direction labels */
		&[data-komodo-tag-name='dir'],
		&[data-komodo-tag-name='direction'] {
			label {
				&[data-komodo-tag-value='C']::before {
					content: '○';
				}

				&[data-komodo-tag-value='N']::before {
					content: '↑';
				}

				&[data-komodo-tag-value='NE']::before {
					content: '↗';
				}

				&[data-komodo-tag-value='E']::before {
					content: '→';
				}

				&[data-komodo-tag-value='SE']::before {
					content: '↘';
				}

				&[data-komodo-tag-value='S']::before {
					content: '↓';
				}

				&[data-komodo-tag-value='SW']::before {
					content: '↙';
				}

				&[data-komodo-tag-value='W']::before {
					content: '←';
				}

				&[data-komodo-tag-value='NW']::before {
					content: '↖';
				}
			}
		}

		/* Add symbols before from and to labels */
		&[data-komodo-tag-name='to'],
		&[data-komodo-tag-name='from'] {
			label[data-komodo-tag-value='home']::before {
				content: '🏠';
			}
		}

		/* Add 🚧 emoji before 'WIP' status label */
		&[data-komodo-tag-name='stat'],
		&[data-komodo-tag-name='status'] {
			label {
				&[data-komodo-tag-value='ready'] {
					&::before {
						content: '✅';
					}
				}

				&[data-komodo-tag-value='wip'],
				&[data-komodo-tag-value='WIP'] {
					&::before {
						content: '🚧';
					}
				}
			}
		}

		/* Add symbols before type options */
		&[data-komodo-tag-name='type'] {
			label {
				&[data-komodo-tag-value='segment']::before {
					content: '⛔';
				}

				&[data-komodo-tag-value='loop']::before {
					content: '♾️';
				}
			}
		}

		&[data-komodo-tag-name='weather'] {
			label {
				&[data-komodo-tag-value='segment']::before {
					content: '⛔';
				}

				&[data-komodo-tag-value='loop']::before {
					content: '♾️';
				}
			}
		}

		/* For tags with name 'weather', 'when', or 'is' */
		&[data-komodo-tag-name='weather'],
		&[data-komodo-tag-name='when'],
		&[data-komodo-tag-name='is'] {
			label {
				&[data-komodo-tag-value='dry'],
				&[data-komodo-tag-value='sunny'] {
					&::before {
						content: '☀️';
					}
				}
			}
		}
	}

	.komodo-tag-pill-container > .komodo-pill {
		/* For tags with name 'direction' */
		&[data-komodo-tag-name='direction'],
		&[data-komodo-tag-name='dir'] {
			background: darkgreen;

			/* Don't show the tag name or separator */
			> div {
				> span:nth-child(1),
				> span:nth-child(2) {
					display: none;
				}
			}

			/* Show a ○ symbol before 'C' values */
			&[data-komodo-tag-value='C'] > div::before {
				content: '○ ';
			}

			/* Show a ↑ symbol before 'N' values */
			&[data-komodo-tag-value='N'] > div::before {
				content: '↑ ';
			}

			/* Show a ↗ symbol before 'NE' values */
			&[data-komodo-tag-value='NE'] > div::before {
				content: '↗ ';
			}

			/* Show a → symbol before 'E' values */
			&[data-komodo-tag-value='E'] > div::before {
				content: '→ ';
			}

			/* Show a ↘ symbol before 'SE' values */
			&[data-komodo-tag-value='SE'] > div::before {
				content: '↘ ';
			}

			/* Show a ↓ symbol before 'S' values */
			&[data-komodo-tag-value='S'] > div::before {
				content: '↓ ';
			}

			/* Show a ↙ symbol before 'SW' values */
			&[data-komodo-tag-value='SW'] > div::before {
				content: '↙ ';
			}

			/* Show a ← symbol before 'W' values */
			&[data-komodo-tag-value='W'] > div::before {
				content: '← ';
			}

			/* Show a ↖ symbol before 'NW' values */
			&[data-komodo-tag-value='NW'] > div::before {
				content: '↖ ';
			}
		}

		/* For tags with name 'from' or 'to' */
		&[data-komodo-tag-name='from'],
		&[data-komodo-tag-name='to'] {
			/* Replace 'home' values with a 🏠 emoji */
			&[data-komodo-tag-value='home'] > div {
				/* Show the emoji after the container div */
				&::after {
					content: '🏠';
				}

				/* Hide the text value */
				> span:nth-child(3) {
					display: none;
				}
			}
		}

		/* For tags with name 'from' */
		&[data-komodo-tag-name='from'] {
			background-color: mediumslateblue;
		}

		/* For tags with name 'to' */
		&[data-komodo-tag-name='to'] {
			background-color: darkslateblue;
		}

		/* For tags with name 'location' or 'in' */
		&[data-komodo-tag-name='location'],
		&[data-komodo-tag-name='loc'],
		&[data-komodo-tag-name='in'] {
			background-color: dimgray;

			> div {
				/* Show the emoji before the container div */
				&::before {
					content: '📍 ';
				}

				/* Hide the text value */
				> span:nth-child(1),
				> span:nth-child(2) {
					display: none;
				}
			}
		}

		/* For tags with name 'status' or 'stat' */
		&[data-komodo-tag-name='status'],
		&[data-komodo-tag-name='stat'] {
			/* Don't show the tag name or separator */
			> div {
				> span:nth-child(1),
				> span:nth-child(2) {
					display: none;
				}
			}

			/* Don't show the tag at all if the value is 'ready' */
			&[data-komodo-tag-value='ready'] {
				display: none;
			}

			/* Replace 'WIP' values with a 🚧 emoji */
			&[data-komodo-tag-value='WIP'] {
				background-color: darkorange;

				> div {
					/* Show the emoji after the container div */
					&::after {
						content: '🚧';
					}

					/* Hide the text value */
					> span:nth-child(3) {
						display: none;
					}
				}
			}
		}

		/* For tags with name 'type' */
		&[data-komodo-tag-name='type'] {
			/* Don't show the tag name or separator */
			> div {
				> span:nth-child(1),
				> span:nth-child(2) {
					display: none;
				}
			}

			/* Replace 'segment' values with a ⛔ emoji */
			&[data-komodo-tag-value='segment'] {
				background-color: red;

				> div {
					/* Show the emoji after the container div */
					&::after {
						content: '⛔';
					}

					/* Hide the text value */
					& span:nth-child(3) {
						display: none;
					}
				}
			}

			/* Replace 'loop' values with a ♾️ emoji */
			&[data-komodo-tag-value='loop'] {
				background-color: purple;

				> div {
					/* Show the emoji after the container div */
					&::after {
						content: '♾️';
					}

					/* Hide the text value */
					& span:nth-child(3) {
						display: none;
					}
				}
			}
		}

		/* For tags with name 'weather', 'when', or 'is' */
		&[data-komodo-tag-name='weather'],
		&[data-komodo-tag-name='when'],
		&[data-komodo-tag-name='is'] {
			/* Don't show the tag name or separator */
			> div {
				> span:nth-child(1),
				> span:nth-child(2) {
					display: none;
				}
			}

			/* Replace 'dry' values with a ☀️ emoji */
			&[data-komodo-tag-value='dry'] {
				background-color: transparent;

				> div {
					/* Show the emoji after the container div */
					&::after {
						content: '☀️';
					}

					/* Hide the text value */
					& span:nth-child(3) {
						display: none;
					}
				}
			}
		}
	}
}