.container {
	display: flex;
	gap: var(--s-3);
	margin-left: auto;
}

.searchAndAddContainer {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--s-3);
}

.searchWrapper > button,
.addNewWrapper > button {
	width: 100%;
}

@media screen and (max-width: 1000px) {
	.searchAndAddContainer {
		grid-template-columns: 1fr 1fr;
	}
}

.button {
	display: grid;
	place-items: center;
	background-color: var(--color-bg);
	width: var(--input-height-small);
	height: var(--input-height-small);
	padding: 0.25rem;
	border: var(--border-style);
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
}

.button:focus-visible {
	outline: var(--input-focus-ring);
	outline-offset: 1px;
}

.buttonIcon {
	width: 1.15rem;
}

@media screen and (max-width: 640px) {
	.container > .userItem {
		display: none;
	}
}