.tag-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;

	width: fit-content;
	padding: 4px;
	border: 1px solid var(--color-text);
	background-color: var(--color-background);

	font-family: monospace;
	font-size: 0.9rem;

	position: relative;
}

.tag-container:focus-within {
	background-color: var(--color-accent);
}

.tag-input {
	border: none;
	order: 1;
	background: none;
	font-family: monospace;
	padding: 0;
}
.tag-input:focus-visible {
	outline: none;
}

.tag-display {
	background-color: var(--color-text);
	color: var(--color-text-inverse);
	padding: 2px 4px;
	border-radius: 4px;
	border: none;

	user-select: none;
	cursor: pointer;
}
.tag-display::before {
	content: '# ';
}
.tag-display:hover::before,
.tag-display:focus-visible::before {
	content: 'X ';
}

.tag-display-container {
	display: flex;
	gap: 4px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.suggestions {
	position: absolute;
	padding: 0;
	margin: 0;
	list-style: none;
	left: 0;
	top: 100%;
	width: 100%;
	border: 1px solid var(--color-text);

	background-color: var(--color-body);
	overflow: hidden;

	z-index: 100;
}

.suggestions:empty {
	padding: 4px 0;
}
.suggestions:empty::before {
	color: var(--color-text-secondary);
	padding: 4px;
	content: 'No Matching Tags';
}

.suggestions > li {
	padding: 4px;
	user-select: none;
	cursor: pointer;
}
.suggestions > li:nth-child(odd) {
	background-color: var(--color-background);
}
.suggestions > li:hover,
.suggestions > li.highlighted {
	background-color: var(--color-accent);
}

.hidden {
	display: none;
}