.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( 100% 0 );
	}

	// TODO: This mess needs refactor
	li:not( #pt-usergroups ):not( #pt-userpage ) {
		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 );
				}
			}
		}

		// Need to be specific to override
		&#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;
				}
			}
		}
	}

	#pt {
		&-user {
			&page {
				padding: 1rem 0.75rem 0 0.75rem;

				a {
					justify-content: flex-start;
					padding: 0.25rem 0.5rem;
					color: var( --color-base--emphasized ) !important;
					font-size: 1rem;
					font-weight: 600;
					word-break: break-word;
				}
			}

			&groups {
				display: flex;
				flex-wrap: wrap;
				padding: 0 1rem;
				margin-bottom: 0.5rem;

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

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

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

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

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

			&contris {
				padding: 0 1.25rem 0.625rem 1.25rem;
				border-bottom: 1px solid var( --border-color-base );
				font-weight: 500;
			}
		}

		&-anonuserpage {
			display: none;
		}
	}
}

// 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 );
		}
	}
}