#personalmenu {
	position: relative;
	font-size: @ui-menu-text;
	opacity: 0;
	pointer-events: none;
	transition: @transition-opacity-quick;
	user-select: none;
	visibility: hidden;

	&-checkbox {
		&:checked {
			~ #personalmenu {
				opacity: 1;
				pointer-events: auto;
				visibility: visible;

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

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

	&-button {
		width: var( --width-button-base );
		height: var( --height-header );
		opacity: var( --opacity-icon-base );
		transition: @transition-opacity-quick;

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

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

		&:before {
			display: block;
			width: inherit;
			height: inherit;
			background-position: center;
			background-repeat: no-repeat;
			content: '';
		}
	}
}

#p-personal {
	position: fixed;
	top: var( --height-header );
	right: 0;
	left: 0;
	min-width: 250px;
	margin: 0;

	ul {
		overflow: hidden; // So that hover state is rounded
		border: 1px solid var( --border-color-base--lighter );
		background-color: var( --background-color-dp-08 );
		border-radius: @border-radius-medium;
		.boxshadow(4);
	}

	li:not( #pt-usergroups ):not( #pt-userpage ) {
		a {
			.menu-item-link;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;

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

			&: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-userpage {
		padding: 16px 12px 0 12px;

		a {
			justify-content: flex-start;
			padding: 4px 8px;
			color: var( --color-base--emphasized ) !important;
			font-size: 16px;
			font-weight: 600;
			word-break: break-word;
		}
	}

	#pt-usergroups {
		display: flex;
		flex-wrap: wrap;
		padding: 0 16px 10px 16px;
		border-bottom: 1px solid var( --border-color-base );

		a {
			padding: 2px 4px;
			color: var( --color-base--subtle );
		}
	}

	#pt-userpage,
	#pt-usergroups {
		line-height: 1;

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

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

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

.skin-citizen-dark {
	#personalmenu-button:before,
	#p-personal a:after {
		filter: invert( 1 );
	}
}

@media ( min-width: @width-breakpoint-tablet ) {
	#p-personal {
		position: absolute;
		left: unset;
	}
}