.citizen-personalMenu {
	position: relative; // anchor card

	&__card {
		position: absolute;
		top: 100%;
		right: 0;
		overflow: hidden; // rounded corner
		min-width: var( --size-dialog-min--header );
		font-size: 0.875rem;
		.citizen-card;
		.citizen-card-hide( top 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 );
					}
				}
			}
		}
	}
}

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

		&groups {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0.3125rem;
			gap: 0.125rem;

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

		&page,
		&groups {
			line-height: 1;

			a {
				display: block;
				transition: @transition-color;

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

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

		&contris {
			padding: 0 0.5rem;
			margin-top: 0.5rem;
			font-weight: 500;
		}
	}

	&-anonuserpage {
		display: none;
	}
}

#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();
	}
}

@media ( max-width: @width-breakpoint-tablet ) {
	.citizen-personalMenu {
		&__card {
			position: fixed;
			top: var( --height-header );
			right: var( --padding-page );
			left: var( --padding-page );
		}
	}
}