werewolves/style/faction.scss

.village {
	--faction-color: $village_color;
	--faction-border: $village_border;
	--faction-color-faint: $village_color_faint;
	--faction-border-faint: $village_border_faint;

	&.box {
		background-color: $village_color;
		border: 1px solid $village_border;

		.selected:not(.faint) {
			color: white;
			background-color: $village_border;
		}
		.selected.faint {
			color: white;
			background-color: $village_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $village_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $village_border_faint;
			background-color: $village_color_faint;

			&.hover:hover {
				background-color: $village_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $village_color underline;

		&.faint {
			text-decoration: $village_color_faint underline;
		}
	}

	&.text-color {
		color: $village_border;

		&.faint {
			color: $village_border_faint;
		}
	}
}
		
.wolves {
	--faction-color: $wolves_color;
	--faction-border: $wolves_border;
	--faction-color-faint: $wolves_color_faint;
	--faction-border-faint: $wolves_border_faint;

	&.box {
		background-color: $wolves_color;
		border: 1px solid $wolves_border;

		.selected:not(.faint) {
			color: white;
			background-color: $wolves_border;
		}
		.selected.faint {
			color: white;
			background-color: $wolves_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $wolves_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $wolves_border_faint;
			background-color: $wolves_color_faint;

			&.hover:hover {
				background-color: $wolves_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $wolves_color underline;

		&.faint {
			text-decoration: $wolves_color_faint underline;
		}
	}

	&.text-color {
		color: $wolves_border;

		&.faint {
			color: $wolves_border_faint;
		}
	}
}
		
.offensive {
	--faction-color: $offensive_color;
	--faction-border: $offensive_border;
	--faction-color-faint: $offensive_color_faint;
	--faction-border-faint: $offensive_border_faint;

	&.box {
		background-color: $offensive_color;
		border: 1px solid $offensive_border;

		.selected:not(.faint) {
			color: white;
			background-color: $offensive_border;
		}
		.selected.faint {
			color: white;
			background-color: $offensive_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $offensive_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $offensive_border_faint;
			background-color: $offensive_color_faint;

			&.hover:hover {
				background-color: $offensive_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $offensive_color underline;

		&.faint {
			text-decoration: $offensive_color_faint underline;
		}
	}

	&.text-color {
		color: $offensive_border;

		&.faint {
			color: $offensive_border_faint;
		}
	}
}
		
.defensive {
	--faction-color: $defensive_color;
	--faction-border: $defensive_border;
	--faction-color-faint: $defensive_color_faint;
	--faction-border-faint: $defensive_border_faint;

	&.box {
		background-color: $defensive_color;
		border: 1px solid $defensive_border;

		.selected:not(.faint) {
			color: white;
			background-color: $defensive_border;
		}
		.selected.faint {
			color: white;
			background-color: $defensive_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $defensive_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $defensive_border_faint;
			background-color: $defensive_color_faint;

			&.hover:hover {
				background-color: $defensive_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $defensive_color underline;

		&.faint {
			text-decoration: $defensive_color_faint underline;
		}
	}

	&.text-color {
		color: $defensive_border;

		&.faint {
			color: $defensive_border_faint;
		}
	}
}
		
.intel {
	--faction-color: $intel_color;
	--faction-border: $intel_border;
	--faction-color-faint: $intel_color_faint;
	--faction-border-faint: $intel_border_faint;

	&.box {
		background-color: $intel_color;
		border: 1px solid $intel_border;

		.selected:not(.faint) {
			color: white;
			background-color: $intel_border;
		}
		.selected.faint {
			color: white;
			background-color: $intel_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $intel_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $intel_border_faint;
			background-color: $intel_color_faint;

			&.hover:hover {
				background-color: $intel_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $intel_color underline;

		&.faint {
			text-decoration: $intel_color_faint underline;
		}
	}

	&.text-color {
		color: $intel_border;

		&.faint {
			color: $intel_border_faint;
		}
	}
}
		
.starts-as-villager {
	--faction-color: $starts_as_villager_color;
	--faction-border: $starts_as_villager_border;
	--faction-color-faint: $starts_as_villager_color_faint;
	--faction-border-faint: $starts_as_villager_border_faint;

	&.box {
		background-color: $starts_as_villager_color;
		border: 1px solid $starts_as_villager_border;

		.selected:not(.faint) {
			color: white;
			background-color: $starts_as_villager_border;
		}
		.selected.faint {
			color: white;
			background-color: $starts_as_villager_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $starts_as_villager_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $starts_as_villager_border_faint;
			background-color: $starts_as_villager_color_faint;

			&.hover:hover {
				background-color: $starts_as_villager_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $starts_as_villager_color underline;

		&.faint {
			text-decoration: $starts_as_villager_color_faint underline;
		}
	}

	&.text-color {
		color: $starts_as_villager_border;

		&.faint {
			color: $starts_as_villager_border_faint;
		}
	}
}
		
.damned {
	--faction-color: $damned_color;
	--faction-border: $damned_border;
	--faction-color-faint: $damned_color_faint;
	--faction-border-faint: $damned_border_faint;

	&.box {
		background-color: $damned_color;
		border: 1px solid $damned_border;

		.selected:not(.faint) {
			color: white;
			background-color: $damned_border;
		}
		.selected.faint {
			color: white;
			background-color: $damned_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $damned_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $damned_border_faint;
			background-color: $damned_color_faint;

			&.hover:hover {
				background-color: $damned_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $damned_color underline;

		&.faint {
			text-decoration: $damned_color_faint underline;
		}
	}

	&.text-color {
		color: $damned_border;

		&.faint {
			color: $damned_border_faint;
		}
	}
}
		
.drunk {
	--faction-color: $drunk_color;
	--faction-border: $drunk_border;
	--faction-color-faint: $drunk_color_faint;
	--faction-border-faint: $drunk_border_faint;

	&.box {
		background-color: $drunk_color;
		border: 1px solid $drunk_border;

		.selected:not(.faint) {
			color: white;
			background-color: $drunk_border;
		}
		.selected.faint {
			color: white;
			background-color: $drunk_border_faint;
		}

		&.hover:not(.selected):hover {
			color: white;
			background-color: $drunk_border;
		}

		&.faint:not(.selected) {
			border: 1px solid $drunk_border_faint;
			background-color: $drunk_color_faint;

			&.hover:hover {
				background-color: $drunk_border_faint;
			}
		}
	}

	&.underline {
		text-decoration: $drunk_color underline;

		&.faint {
			text-decoration: $drunk_color_faint underline;
		}
	}

	&.text-color {
		color: $drunk_border;

		&.faint {
			color: $drunk_border_faint;
		}
	}
}