/**
 * Code based on Tagger, copyright (c) 2018-2022 Jakub T. Jankiewicz <https://jcubic.pl/me>.
 * Released under the MIT license.
 */

.tagger {
	border: 1px solid #909497;
}

.tagger > ul > li {
	padding-bottom: 0.4rem;
	margin: 0.4rem 5px 4px;

	&:not(.tagger-new) {
		a, a:visited {
			text-decoration: none;
			color: black;
		}

		> :first-child {
			padding: 4px 4px 4px 8px;
			background: #B1C3D7;
			border: 1px solid #4181ed;
			border-radius: 3px;
		}

		> span, > a > span {
			white-space: nowrap;
		}
	}
}

.tagger li a.close {
	padding: 4px;
	margin-left: 4px;
	float: none;
	filter: alpha(opacity=100);
	opacity: 1;
	font-size: 16px;
	line-height: 16px;

	&:hover {
		color: white;
	}
}

.tagger .tagger-new {
	flex-grow: 1;
	position: relative;
	min-width: 40px;

	input {
		border: none;
		outline: none;
		box-shadow: none;
		width: 100%;
		padding-left: 0;
		background: transparent;
	}
}

.tagger.wrap > ul {
	flex-wrap: wrap;
	justify-content: start;
}

.tagger {
	border: 0;

	> ul {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 4px 5px 0;
		justify-content: space-between;
		box-sizing: border-box;
		height: auto;
		flex: 0 0 auto;
		overflow-y: auto;
		margin: 0;
		list-style: none;
		border: 1px solid #dfdfdf;
		border-radius: 3px;
		background-color: #fff;
	}
}

.tagger-new ul,
.tagger > ul > li:not(.tagger-new) > a,
.tagger li:not(.tagger-new) > span {
	border-radius: 6px;
	border: 1px solid #cad8f3;
	background-color: #dee7f8;

	&:hover {
		background-color: #bbcef1;
		border-color: #6d95e0;
	}
}

.tagger-new ul,
.tagger > ul > li:not(.tagger-new) {
	a, a:visited {
		color: #555;
		font-size: 1.1em;
	}
}
