:root {
    --normal: #A8A878;
    --fighting: #C03028;
    --flying: #A890F0;
    --poison: #A040A0;
    --ground: #E0C068;
    --rock: #B8A038;
    --bug: #A8B820;
    --ghost: #705898;
    --steel: #B8B8D0;
    --fire: #F08030;
    --water: #6890F0;
    --grass: #78C850;
    --electric: #F8D030;
    --psychic: #F85888;
    --ice: #98D8D8;
    --dragon: #7038F8;
    --dark: #705848;
    --fairy: #EE99AC;
    --unknown: #68A090;
    --shadow: #000000;
}

div.type {
	display: inline-block;
	line-height: 20px;
	height: 20px;
	padding: 0px;
	color: white;
	font-weight: bold;
	font-family: monospace;
	text-shadow: 1px 1px 2px black;
	border-radius: 3px;
	width: 74px;
	text-align: center;
    &[data-type-id="1"] { background-color: var(--normal); &::after { content: "NORMAL"; } }
    &[data-type-id="2"] { background-color: var(--fighting); &::after { content: "FIGHTING"; } }
    &[data-type-id="3"] { background-color: var(--flying); &::after { content: "FLYING"; } }
    &[data-type-id="4"] { background-color: var(--poison); &::after { content: "POISON"; } }
    &[data-type-id="5"] { background-color: var(--ground); &::after { content: "GROUND"; } }
    &[data-type-id="6"] { background-color: var(--rock); &::after { content: "ROCK"; } }
    &[data-type-id="7"] { background-color: var(--bug); &::after { content: "BUG"; } }
    &[data-type-id="8"] { background-color: var(--ghost); &::after { content: "GHOST"; } }
    &[data-type-id="9"] { background-color: var(--steel); &::after { content: "STEEL"; } }
    &[data-type-id="10"] { background-color: var(--fire); &::after { content: "FIRE"; } }
    &[data-type-id="11"] { background-color: var(--water); &::after { content: "WATER"; } }
    &[data-type-id="12"] { background-color: var(--grass); &::after { content: "GRASS"; } }
    &[data-type-id="13"] { background-color: var(--electric); &::after { content: "ELECTRIC"; } }
    &[data-type-id="14"] { background-color: var(--psychic); &::after { content: "PSYCHIC"; } }
    &[data-type-id="15"] { background-color: var(--ice); &::after { content: "ICE"; } }
    &[data-type-id="16"] { background-color: var(--dragon); &::after { content: "DRAGON"; } }
    &[data-type-id="17"] { background-color: var(--dark); &::after { content: "DARK"; } }
    &[data-type-id="18"] { background-color: var(--fairy); &::after { content: "FAIRY"; } }
    &[data-type-id="10001"] { background-color: var(--unknown); &::after { content: "UNKNOWN"; } }
    &[data-type-id="10002"] { background-color: var(--shadow); &::after { content: "SHADOW"; } }
}

/* pokemon filter match window */
span.type {
    &[data-type-id="1"] { color: var(--normal); }
    &[data-type-id="2"] { color: var(--fighting); }
    &[data-type-id="3"] { color: var(--flying); }
    &[data-type-id="4"] { color: var(--poison); }
    &[data-type-id="5"] { color: var(--ground); }
    &[data-type-id="6"] { color: var(--rock); }
    &[data-type-id="7"] { color: var(--bug); }
    &[data-type-id="8"] { color: var(--ghost); }
    &[data-type-id="9"] { color: var(--steel); }
    &[data-type-id="10"] { color: var(--fire); }
    &[data-type-id="11"] { color: var(--water); }
    &[data-type-id="12"] { color: var(--grass); }
    &[data-type-id="13"] { color: var(--electric); }
    &[data-type-id="14"] { color: var(--psychic); }
    &[data-type-id="15"] { color: var(--ice); }
    &[data-type-id="16"] { color: var(--dragon); }
    &[data-type-id="17"] { color: var(--dark); }
    &[data-type-id="18"] { color: var(--fairy); }
    &[data-type-id="10001"] { color: var(--unknown); }
    &[data-type-id="10002"] { color: var(--shadow); }
}