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

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

		li {
			margin: 0 0.75rem;
		}
	}

	&-personal {
		li {
			a {
				.menu-item-link;
				align-items: center;
				justify-content: space-between;
				padding: 0.625rem 1.25rem;

				&:after {
					.resource-loader-list-icon;
					display: block;
					margin-left: @icon-padding;
					background-size: contain;
					opacity: var( --opacity-icon-base );
					transition: @transition-opacity;
				}

				&:hover {
					.menu-item-link-hover;

					&:after {
						opacity: var( --opacity-icon-base--hover );
					}
				}

				&:active {
					.menu-item-link-active;

					&:after {
						opacity: var( --opacity-icon-base--active );
					}
				}
			}
		}
	}
}

.citizen-userMenu__header {
	padding: var( --space-md ) 0;
	border-bottom: 1px solid var( --border-color-base );
}

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

#pt {
	&-user {
		&page-2 {
			a {
				padding: var( --space-xs ) 0;
				color: var( --color-base--emphasized );
				font-size: 1rem;
				font-weight: 600;
				word-break: break-word;
			}
		}

		&groups {
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: var( --space-xs );
			}

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

		&page-2,
		&groups {
			a {
				display: block;
				transition: @transition-color;

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

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

		&contris {
			margin-top: var( --space-sm );
			font-weight: 500;
		}
	}
}

#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-personalMenu__checkbox:checked {
	~ .citizen-personalMenu__card {
		.citizen-card-show();
	}
}

.citizen-animations-ready {
	.citizen-personalMenu__card {
		.citizen-card-transition();
	}
}