.userItem {
	outline-offset: 1px;
	border-radius: var(--radius-avatar);
}

.userItem:focus-visible {
	outline: var(--focus-ring);
}

.avatar {
	width: var(--field-size-sm);
	height: var(--field-size-sm);
	color: transparent;
}

.logInButton {
	display: flex;
	height: var(--field-size-sm);
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border: 2px solid;
	border-color: var(--color-text-accent);
	border-radius: var(--radius-box);
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	font-size: var(--font-xs);
	font-weight: var(--weight-bold);
	gap: var(--s-2);
	text-decoration: none;
}

.logInButton > svg {
	width: 1rem;
}

.logInButton:active {
	transform: translateY(1px);
}