@include screen-md-up {
	.pageNavigation {
		background-color: $wcfNavigationBackground;
		color: $wcfNavigationText;
		flex: 0 0 auto;
		padding: 10px 0;

		> div {
			align-items: center;
			display: flex;
			justify-content: flex-end;
			min-height: 20px;
		}

		.icon {
			color: inherit;
		}

		a {
			color: $wcfNavigationLink;

			&:hover {
				color: $wcfNavigationLinkActive;
			}
		}
	}

	.boxesHeaderBoxes + .pageNavigation {
		margin-top: 1px;
	}
}

@include screen-lg {
	.pageNavigationIcons {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row-reverse;
		margin-left: 10px;

		> li {
			flex: 0 0 auto;

			&:not(:last-child) {
				margin-left: 10px;
			}
		}
	}
}

@include screen-sm-down {
	.breadcrumbs {
		margin-bottom: -5px;
		margin-top: 5px;
	}

	.breadcrumbs > ol > li {
		display: none;

		&:last-child {
			align-items: center;
			color: $wcfContentDimmedText;
			display: flex;
			flex: 1;

			@include wcfFontDefault;

			&::before {
				content: $fa-var-long-arrow-left;
				flex: 0 auto;
				font-family: FontAwesome;
			}

			> a {
				color: $wcfContentDimmedLink;
				display: block;
				flex: 1;
				overflow: hidden;
				padding: 5px 0 5px 10px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}

@include screen-md-down {
	.pageNavigationIcons {
		display: none;
	}
}