@import '../../client/css/defaults';

.people-list-item {
	$dimensions-avatar: 1.8em;
	$dimensions-close-button: 1.2em;

	display: flex;
	margin: 0 auto;
	position: relative;
	border-radius: 0.25em;
	text-align: left;
	align-items: center;

	&:hover {
		background-color: lighten($color-banner-bg, 2%);
	}

	.user-name {
		display: block;
	}

	.user-username {
		display: block;
		font-size: 0.7em;
		opacity: 0.3;
	}

	.avatar {
		width: $dimensions-avatar;
		height: $dimensions-avatar;
		margin: 0;
		vertical-align: middle;
		display: inline-block;
		position: absolute;
		left: 0.3em;
		top: 50%;
		transform: translate(0, -50%);
	}

	.user-info {
		padding-left: 2.5em;
		padding-right: 2.5em;
		flex: 2;
	}

	> button {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		right: 0;
	}

	.close-button {
		height: $dimensions-close-button;
		min-width: $dimensions-close-button;
		line-height: $dimensions-close-button;
		background-color: inherit;
		transform: translate(0, -50%);
		flex: 1;
	}
}