.tags {
	position: relative;
}
.tag-search__label {
	border-radius: var(--border-radius_m);
	box-sizing: border-box;
	overflow: hidden;
	padding: 10px;
	position: relative;
	height: 100%;
}
.tag-search__label:focus-within {
	outline: 2px solid var(--color-gray-3);
	border-radius: var(--border-radius_m);
}
.tag-search__input {
	border: none;
	line-height: 20px;
	outline: none;
	width: 100%;
	height: 100%;
}

.tag-suggestions {
	border: 1px solid var(--color-gray-light);
	box-shadow: var(--box-shadow-m);
	border-radius: var(--border-radius_m);
	background: var(--color-white);
	box-sizing: border-box;
	position: absolute;
	top: calc(100% + 4px);
	padding: 10px;
	width: 100%;
	z-index: 4;
}
.tag-suggestions:not(.active) {
	opacity: 0;
	pointer-events: none;
}
.tag-suggestions__header {
	color: var(--color-gray-dark);
	font-size: .875rem;
	margin-bottom: 5px;
}
.tag-suggestions__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.tag-suggestions__tags .tag {
	background: var(--color-gray-light);
	cursor: pointer;
}
.tag-suggestions__tags .tag:not(.disabled):hover {
	background: var(--color-gray-9);
}
.tag-suggestions__empty {
	font-style: italic;
	font-size: .875rem;
	margin: 5px 0;
}

.advised-tags {
	position: relative;
	box-shadow: none;
	border: none;
	padding: 0;
	opacity: 100%;
	z-index: 1;
}
.advised-tags > .tag-suggestions__header {
	margin-top: 10px;
}

.tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag {
	background: var(--color-gray-light);
	border-radius: var(--border-radius_m);
	display: flex;
	align-items: center;
	padding: 5px 8px 5px 10px;
	transition: var(--transition);
	cursor: pointer;
}
.tag:hover {
	background: var(--color-gray-9);
}
.tag__name {
	color: var(--color-blue);
	font-weight: 600;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tag.disabled .tag__name {
	color: var(--color-brown);
}
.tag__qty {
	color: var(--color-gray-dark);
	font-size: .75em;
}
.tag.disabled .tag__qty {
	color: var(--color-brown);
}
.tag__qty::before {
	content: "(";
}
.tag__qty::after {
	content: ")";
}
.tag__btn-remove {
	background: var(--color-white);
	border-radius: 50%;
	box-sizing: border-box;
	margin-left: 8px;
	position: relative;
	cursor: pointer;
	height: 20px;
	width: 20px;
}
.tag__btn-remove::before,
.tag__btn-remove::after {
	background: var(--color-gray-6);
	border-radius: 30px;
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 1px;
}
.tag__btn-remove::after {
	transform: translate(-50%, -50%) rotate(45deg);
}
.tag__btn-remove::before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.new-tag .tag__name {
	color: var(--color-gray-3);
	max-width: unset;
}
.new-tag .tag__name::after {
	content: "(Проходит модерацию)";
	color: var(--color-red);
	font-size: .75em;
	bottom: 1px;
	position: relative;
	padding-left: .3em;
}

.tag-placeholder {
	background: var(--color-gray-light);
	border-radius: var(--border-radius_m);
	padding: 5px 8px 5px 10px;
	height: 1.5rem;
}
.tag-placeholder:nth-child(3n+1) {
	width: 80px;
}
.tag-placeholder:nth-child(3n+2) {
	width: 120px;
}
.tag-placeholder:nth-child(3n) {
	width: 100px;
}