:root {
	--colortag-inactive-color: #ddd;
}

.btn.colortag,
.badge.colortag,
.dropdown.create-tagging {
	background-color: var(--colortag-color);
	transition: all 0.2s ease 0s;
	opacity: 1;
	font-size: 100%;
	display: inline-block;
	margin: 0.15em 0;
}
.btn.colortag {
	padding: 0.2em 0.4em 0.1em;
	margin: 0.15em;
}
.btn.colortag-light,
.badge.colortag-light {
	color: #000;
}
.btn.colortag-dark,
.badge.colortag-dark {
	color: #fff;
}
.btn.colortag:not(.colortag-active):not(.active):not(:hover),
.badge.colortag:not(.colortag-active):not(.active):not(:hover) {
	color: #000;
	background-color: var(--colortag-inactive-color);
}
.btn.colortag:not(.mltsb-2-stage) > i {
	padding-right: 0.1em;
	top: 2px
}

/* Badge size variants */
.badge-xs {
    font-size: 0.8rem !important;
    padding: 0.25em 0.4em;
}
.badge-sm {
    font-size: 0.9rem !important;
}
.badge-lg {
    font-size: 1.25rem !important;
}
.badge-xl {
    font-size: 1.5rem !important;
}

/* Include exclude buttons */
.colortag-inc-exc {
	display: inline;
}
.colortag-inc-exc > .btn-check:not(:checked) + .colortag {
	display: none;
}
.colortag-inc-exc > .btn.colortag.inactive {
	border-color: var(--colortag-inactive-color);
}
.colortag-inc-exc > .btn.colortag.include {
	background-color: var(--colortag-color);
	border-color: var(--colortag-color);
	box-shadow: none;
}
.colortag-inc-exc > .btn.colortag.exclude {
	color: var(--colortag-color);
	background-color: transparent;
	background-image: none;
	border-color: var(--colortag-color);
	box-shadow: inset 0 0 0 1px var(--colortag-color);
}
.colortag-inc-exc > .btn.colortag-light.exclude {
	color: #000;
	border-color: var(--colortag-color);
}
.colortag-inc-exc > .btn.colortag-dark.include,
.colortag-inc-exc > .btn.colortag-dark.inactive:hover,
.colortag-inc-exc > .btn.colortag-dark.exclude:hover {
	color: #fff;
}

/* Icon indicators (Bootstrap Icons) for include/exclude/inactive states */
.colortag-inc-exc > .btn-check + .btn.colortag:before {
	position: relative;
	top: 2px;
	display: inline-block;
	font-family: 'bootstrap-icons';
	font-style: normal;
	font-weight: 400;
	line-height: 0.7;
	margin-right: 0.25em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: ""; /* empty until a state is active */
}
/* Inactive (neutral) -> square icon */
.colortag-inc-exc > .btn-check:checked + .btn.colortag.inactive:before {
	content: "\f584"; /* bi-square */
}
.colortag-inc-exc > .btn-check:checked + .btn.colortag.inactive:not(:hover):before {
	color: #6c757d;
}
/* Include -> check */
.colortag-inc-exc > .btn-check:checked + .btn.colortag.include:before {
	content: "\f271"; /* bi-check2-square */
}
/* Exclude -> x */
.colortag-inc-exc > .btn-check:checked + .btn.colortag.exclude:before {
	content: "\f659"; /* bi-x-lg */
}

/* Slightly transparent color preview on hover */
.btn.colortag:hover,
.colortag-inc-exc > .btn.colortag:hover {
	background-color: color-mix(in srgb, var(--colortag-color) 70%, transparent);
}

.colortag.pinned:after {
	position: relative;
	top: 0px;
	left: 4px;
	display: inline-block;
	font-family: 'bootstrap-icons';
	font-style: normal;
	font-weight: 400;
	font-size: 0.75em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f4ec"; /* bi-pin-fill */
}