custom-tag-list {
	--max-input-width: 30rem;
	display: block;
}

:where(.tag-list) {
	display: flex;
	margin: 0;
	margin-block-start: var(--flow-space, 0);
	--gap-width: 1rem;

	:where(li,.tag) {
		list-style: '';
		display: flex;
		gap: .25rem;
		align-items: center;
		border: none;
		border-radius: 5rem;
		background-color: var(--color-secondary-glare);
		color: var(--color-dark);
		font-size: 0.875rem;
		margin: 0;
		padding-block: .25rem;
		padding-inline: 1rem;
		min-height: 2.5rem;

		button:not([hidden]) {
			margin-inline-end: -.75rem;
		}
		&:has(button:where(:hover,:focus),a.trash:where(:hover,:focus)) {
			background-color: var(--color-light);
			color: var(--color-secondary);
			outline: 2px solid var(--color-secondary);
		}
		a.trash:focus-visible {
			outline-color: var(--color-primary);
		}
	}
	:where(button,a.trash) {
		min-height: 2rem;
		display: flex;
		align-items: center;
	}
	button,label {
		cursor: pointer;
		margin-block: 0; // Override Bootstrap
	}
	button {
		border: none;
		outline-color: transparent;
		background: transparent;
		color: currentColor;
		fill: currentColor;
		padding: 0;
		box-shadow: none;
	}
}

