/* classes containing only colors are used also by {{SPI case status}}
 * don't add anything but colors to them */
.spi-status {
	width: 100%;
	table-layout: fixed;
	overflow-wrap: break-word;
}

.spi-case-status {
	border: 1px solid darkgrey;
	padding: 4px;
}

.spi-status-ditolak {
	background-color: #eeb4b4;
}

.spi-status-disetujui,
.spi-status-relisted {
	background-color: #add8e6;
}

.spi-status-ditunda {
	background-color: #d9b2d9;
}

.spi-status-baru {
	background-color: #d0f5ff;
}

.spi-status-butuhinfo {
	background-color: #eea0ee;
}

.spi-status-dalamproses {
	background-color: #8deeee;
}

.spi-status-diperiksa {
	background-color: #d0f0c0;
}

.spi-status-ditutup {
	background-color: #ddd;
}

.spi-status-pengurus {
	background-color: #f9ac71;
}

/* why does the case status default differ from the listing default? 
 * case default is this color, listing default is spi-status-default
 * maybe the intent is "transparency" which would unify them if the other weren't in a table
 */
.spi-status-unknown {
	background-color: #fff;
}

.spi-status-default {
	background-color: #ffefdb;
}

/* same hue, saturation, flipped lightness */
@media screen {
	html.skin-theme-clientpref-night .spi-status-ditolak {
		background-color: hsl(0, 63%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-disetujui,
	html.skin-theme-clientpref-night .spi-status-relisted {
		background-color: hsl(195, 53%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-ditunda {
		background-color: hsl(300, 34%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-baru {
		background-color: hsl(193, 100%, 10%);
	}
	
	html.skin-theme-clientpref-night .spi-status-butuhinfo {
		background-color: hsl(300, 70%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-dalamproses {
		background-color: hsl(180, 74%, 25%);
	}
	
	html.skin-theme-clientpref-night .spi-status-diperiksa {
		background-color: hsl(100, 62%, 15%);
	}
	
	html.skin-theme-clientpref-night .spi-status-ditutup {
		background-color: hsl(0, 0%, 15%);
	}
	
	html.skin-theme-clientpref-night .spi-status-pengurus {
		background-color: hsl(26, 92%, 30%);
	}
	
	html.skin-theme-clientpref-night .spi-status-unknown {
		background-color: #000;
	}
	
	html.skin-theme-clientpref-night .spi-status-default {
		background-color: hsl(33, 100%, 10%);
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .spi-status-ditolak {
		background-color: hsl(0, 63%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-disetujui,
	html.skin-theme-clientpref-os .spi-status-relisted {
		background-color: hsl(195, 53%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-ditunda {
		background-color: hsl(300, 34%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-baru {
		background-color: hsl(193, 100%, 10%);
	}
	
	html.skin-theme-clientpref-os .spi-status-butuhinfo {
		background-color: hsl(300, 70%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-dalamproses {
		background-color: hsl(180, 74%, 25%);
	}
	
	html.skin-theme-clientpref-os .spi-status-diperiksa {
		background-color: hsl(100, 62%, 15%);
	}
	
	html.skin-theme-clientpref-os .spi-status-ditutup {
		background-color: hsl(0, 0%, 15%);
	}
	
	html.skin-theme-clientpref-os .spi-status-pengurus {
		background-color: hsl(26, 92%, 30%);
	}
	
	html.skin-theme-clientpref-os .spi-status-unknown {
		background-color: #000;
	}
	
	html.skin-theme-clientpref-os .spi-status-default {
		background-color: hsl(33, 100%, 10%);
	}
}