.tags {
	position: relative;
	display: flex;
	align-items: center;
	align-content: flex-start;
	flex-wrap: wrap;
	border: 1px solid var(--border-color);
	border-radius: 15px;
	padding: 5px 5px 0 5px;
	min-height: 35px;
}

	.tags.no-container {
		border: none;
		padding: 0;
		min-height: auto;
	}

	.tags span.tag {
		background: var(--border-light-color);
		padding: 2px 5px 2px 8px;
		border-radius: 10px;
		position: relative;
		margin: 0 5px 5px 0;
		display: flex;
		align-items: center;
		align-content: space-between;
		font-size: .85rem;
		line-height: .85rem;
		color: var(--dark-color);
	}

		.tags span.tag span {
			font-family: var(--font-icon);
			padding: 5px 3px 5px 5px;
			cursor: pointer;
		}

			.tags span.tag span::after {
				content: "\f00d";
			}

	.tags input[type='text'] {
		border: none;
		padding: 0 5px;
		margin: 0;
		width: auto;
		min-width: 0;
	}

	.tags .auto-complete {
		position: absolute;
		border: 1px solid var(--border-color);
		border-bottom: none;
		border-top: none;
		z-index: 99;
		top: 100%;
		border-radius: 10px;
		max-height: 200px;
		overflow-y: auto;
	}

		.tags .auto-complete span {
			padding: 10px;
			cursor: pointer;
			box-sizing: border-box;
			background-color: var(--color-lightest);
			border-bottom: 1px solid var(--border-color);
			font-size: .9rem;
			line-height: .9rem;
			display: block;
		}

			.tags .auto-complete span:first-child {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}

			.tags .auto-complete span:last-child {
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}

			.tags .auto-complete span:hover {
				background-color: var(--color-2) !important;
				color: var(--color-2-reverse);
			}