.chip-container {
	display: inline-flex;
	align-items: center;
	padding: 0 6px;
	background-color: var(--app-primary-color);
	border-radius: 10px;
	transition:
		background-color 0.3s,
		color 0.3s;
	height: 20px;
	color: var(--alt-font-color, white);
	outline: 1px solid var(--background-color);
	user-select: none;
	gap: 0.2rem;

	/* Gemeinsame Styles für interaktive Elemente */
	& .chip-text,
	& .chip-button {
		background-color: transparent;
		border: none;
		color: var(--alt-font-color, white);
		height: 100%;
		cursor: pointer;

		&:hover {
			background-color: transparent;
		}
	}

	& .chip-text {
		font-family: var(--app-font-family);
		white-space: nowrap;
		border-radius: 5px;
		min-width: 1rem;
		width: 100%;
		text-align: center;
	}

	.chip-button {
		font-size: 12px;
		font-weight: 800;
		padding: 0;
		width: 16px;
	}
}