const user-card-padding = 1rem

.user-cards
	horizontal-wrap
	justify-content center

.user-card
	horizontal
	ui-element
	padding user-card-padding
	margin 0.4rem
	width 100%
	height calc(avatar-size + user-card-padding * 2)

	:hover
		border 1px solid input-focus-border-color
		// TODO: Replace with alpha(main-color, 20%) function
		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)

> 600px
	.user-card
		max-width 230px

.user-card-avatar
	.user-image
		border-radius ui-element-border-radius
		box-shadow none

.user-card-info
	vertical
	margin-left user-card-padding
	overflow hidden

.user-card-nick
	clip-long-text

.user-card-note
	clip-long-text
	color text-color
	opacity 0.5