.citizen-userMenu {
	&__card {
		font-size: 0.875rem;
		.citizen-header-card( right );
	}

	&__header {
		padding: var( --space-md ) 0;
		border-bottom: 1px solid var( --border-color-base );
	}
}

.mw-portlet {
	&-personal-header {
		padding: 0.75rem 0 0.5rem;
		border-bottom: 1px solid var( --border-color-base );

		li {
			margin: 0 0.75rem;
		}
	}
}

#p-user-info {
	> ul > li {
		margin-right: var( --space-md );
		margin-left: var( --space-md );
	}
}

#pt {
	&-anonuserpage span,
	&-tmpuserpage-2,
	&-userpage-2 a {
		padding: var( --space-xxs ) 0;
		color: var( --color-base--emphasized );
		font-size: 1rem;
		font-weight: var( --font-weight-semibold );
		word-break: break-word;
	}

	&-user {
		&groups {
			margin-bottom: var( --space-xs );

			ul {
				display: flex;
				flex-wrap: wrap;
				gap: var( --space-xxs );
			}

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

		&page-2,
		&groups {
			a {
				display: block;
				transition: var( --transition-hover );
				transition-property: color;

				&:hover {
					color: var( --color-primary--hover );
				}

				&:active {
					color: var( --color-primary--active );
				}
			}
		}

		&page {
			&-username {
				margin-top: var( --space-xxs );
				margin-bottom: var( --space-sm );
				color: var( --color-base--subtle );
				font-size: 0.8125rem;
				font-weight: var( --font-weight-normal );
			}
		}

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

#pt-login {
	a {
		.button-blue;

		&:hover {
			.button-blue-hover;
		}

		&:active {
			.button-blue-active;
		}
	}
}

#pt-logout {
	a {
		.button-red;

		&:hover {
			.button-red-hover;
		}

		&:active {
			.button-red-active;
		}
	}
}

// Checkbox hack
#citizen-userMenu__checkbox:checked {
	~ .citizen-userMenu__card {
		.citizen-card-show();
	}
}