.citizen-userInfo {
	padding: var( --space-sm ) var( --space-md ) var( --space-md );
	margin-bottom: var( --space-xs );
	border-bottom: var( --border-subtle );
	.mixin-citizen-font-styles( 'small' );

	&-title {
		font-weight: var( --font-weight-medium );
	}

	&-title > div,
	#pt-userpage-2 > a,
	#pt-tmpuserpage-2 > span {
		padding-block: var( --space-xxs );
		font-weight: var( --font-weight-semi-bold );
		color: var( --color-emphasized );
		.mixin-citizen-font-styles( 'heading-4' );
	}

	#pt-userpage-2 {
		> a > span {
			display: flex;
			flex-grow: 1;
			flex-wrap: wrap;
			gap: var( --space-xs );
			align-items: baseline;
		}

		.citizen-keyboard-hint-key {
			display: none;
		}
	}

	#pt-tmpuserpage-2 > span {
		display: block;
	}

	#pt-userpage-username {
		color: var( --color-subtle );
	}

	&-text {
		color: var( --color-subtle );
	}

	&-usergroups {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var( --space-xs );
		margin: 0;
		list-style: none;

		a {
			color: var( --color-subtle );
		}
	}

	&-stats {
		display: flex;
		flex-wrap: wrap;
		gap: var( --space-xs ) var( --space-lg );
		margin-top: var( --space-sm );

		&-item {
			display: flex;
			flex-direction: column;

			&-value {
				font-weight: var( --font-weight-medium );
				color: var( --color-emphasized );
				white-space: nowrap;
				.mixin-citizen-font-styles( 'body' );
			}

			&-label {
				color: var( --color-subtle );
				.mixin-citizen-font-styles( 'overline' );
			}
		}
	}
}

#pt-userpage-2 > a {
	padding-inline: 0;
	border-radius: var( --border-radius-base );
}