/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/

.dropdown.tags li {
	color: #FFFFFF;
	text-align: center;
}

.dropdown.tags li:nth-child(n+2) {
	font-weight: bold;
}

.dropdown.tags .menu li {
	margin-bottom: 10px;
	border-radius: 3px;
}

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

/* code and tech tags */
ul.tags {
	display: inline-block;
	width: 100%;
}

ul.tags.close li:after {
	font-family: Material-Design-Iconic-Font;
	content: "\f135";

	position: absolute;
	top: 0;
	right: -17px;

	width: 32px;
	height: 32px;

	font-size: 120%;
	line-height: 32px;
}

ul.tags li {
	float: left;

	width: auto;
	height: 32px;

	padding: 5px 20px !important;
	margin: 5px;

	line-height: 22px;
	white-space: nowrap;
}

ul.tags li,
ul.tags.close li:after {
	color: #FFFFFF;
	border-radius: 3px;

	text-align: center;
	font-weight: bold;
}

ul.tags.close li {
	cursor: pointer;
	margin-right: 17px;
}

/* -------------------------------------------------- */
/* COLORS
/* -------------------------------------------------- */

/* default dark shade light shade */
.dropdown.tags li:nth-child(n+2),
ul.tags        li {
	background: linear-gradient(
		60deg,
		#404040 50%,
		#808080 50%
	);
}

ul.tags.close li:after {
	background:
		#808080;
}

/* categories */
.dropdown.tags li[value="Article"],
ul.tags        li[value="Article"] {
	background: linear-gradient(
		60deg,
		var(--color-black-light) 50%,
		var(--color-black) 50%
	);
}

ul.tags.close li[value="Article"]:after {
	background:
		var(--color-black);
}

.dropdown.tags li[value="Creative"],
ul.tags        li[value="Creative"] {
	background: linear-gradient(
		60deg,
		var(--color-orange-light) 50%,
		var(--color-orange) 50%
	);
}

ul.tags.close li[value="Creative"]:after {
	background:
		var(--color-orange);
}

.dropdown.tags li[value="Demo"],
ul.tags        li[value="Demo"] {
	background: linear-gradient(
		60deg,
		var(--color-blue-light) 50%,
		var(--color-blue) 50%
	);
}

ul.tags.close li[value="Demo"]:after {
	background:
		var(--color-blue);
}

.dropdown.tags li[value="Project"],
ul.tags        li[value="Project"] {
	background: linear-gradient(
		60deg,
		var(--color-purple-light) 50%,
		var(--color-purple) 50%
	);
}

ul.tags.close li[value="Project"]:after {
	background:
		var(--color-purple);
}

/* code */
.dropdown.tags li[value="HTML"],
ul.tags        li[value="HTML"] {
	background: linear-gradient(
		60deg,
		#e44f28 50%,
		#f1662b 50%
	);
}

ul.tags.close li[value="HTML"]:after {
	background: #f1662b;
}

.dropdown.tags li[value="CSS"],
ul.tags        li[value="CSS"] {
	background: linear-gradient(
		60deg,
		#0873b9 50%,
		#28a9e0 50%
	);
}

ul.tags.close li[value="CSS"]:after {
	background: #28a9e0;
}

.dropdown.tags li[value="JS"],
ul.tags        li[value="JS"] {
	background: linear-gradient(
		60deg,
		#e5a32b 50%,
		#e6c61d 50%
	);
}

ul.tags.close li[value="JS"]:after {
	background: #e6c61d;
}

.dropdown.tags li[value="PHP"],
ul.tags        li[value="PHP"] {
	background: linear-gradient(
		60deg,
		#777bb2 50%,
		#484c88 50%
	);
}

ul.tags.close li[value="PHP"]:after {
	background: #484c88;
}

.dropdown.tags li[value="C++"],
ul.tags        li[value="C++"] {
	background: linear-gradient(
		60deg,
		#004283 50%,
		#659bd3 50%
	);
}

ul.tags.close li[value="C++"]:after {
	background: #659bd3;
}

.dropdown.tags li[value^="Python"],
ul.tags        li[value^="Python"] {
	background: linear-gradient(
		60deg,
		#357ab2 50%,
		#ffd946 50%
	);
}

ul.tags.close li[value^="Python"]:after {
	background: #ffd946;
}

/* 2D */
.dropdown.tags li[value="Inkscape"],
ul.tags        li[value="Inkscape"] {
	background: linear-gradient(
		60deg,
		#404040 50%,
		#808080 50%
	);
}

ul.tags.close li[value="Inkscape"]:after {
	background: #808080;
}

.dropdown.tags li[value="Gimp"],
ul.tags        li[value="Gimp"] {
	background: linear-gradient(
		60deg,
		#58554b 50%,
		#746c56 50%
	);
}

ul.tags.close li[value="Gimp"]:after {
	background: #746c56;
}

/* 3D */
.dropdown.tags li[value="Blender"],
ul.tags        li[value="Blender"] {
	background: linear-gradient(
		60deg,
		#e87d0d 50%,
		#265787 50%
	);
}

ul.tags.close li[value="Blender"]:after {
	background: #265787;
}

.dropdown.tags li[value="LDraw"],
ul.tags        li[value="LDraw"] {
	background: linear-gradient(
		60deg,
		#ad1918 50%,
		#eb1919 50%
	);
}

ul.tags.close li[value="LDraw"]:after {
	background: #eb1919;
}

.dropdown.tags li[value="OpenGL"],
ul.tags        li[value="OpenGL"] {
	background: linear-gradient(
		60deg,
		#396a84 50%,
		#5586a1 50%
	);
}

ul.tags.close li[value="OpenGL"]:after {
	background: #5586a1;
}

/* apps */
.dropdown.tags li[value="MYSQL"],
ul.tags        li[value="MYSQL"] {
	background: linear-gradient(
		60deg,
		#0097b7 50%,
		#f2910f 50%
	);
}

ul.tags.close li[value="MYSQL"]:after {
	background: #f2910f;
}

.dropdown.tags li[value="Microservices"],
.dropdown.tags li[value^="Docker"],
ul.tags        li[value="Microservices"],
ul.tags        li[value^="Docker"] {
	background: linear-gradient(
		60deg,
		#2854a1 50%,
		#2396ed 50%
	);
}

ul.tags.close li[value="Microservices"]:after,
ul.tags.close li[value^="Docker"]:after {
	background: #2396ed;
}