.pageAction {
	bottom: 10px;
	display: flex;
	justify-content: flex-end;
	left: 10px;
	pointer-events: none;
	position: fixed;
	right: 10px;
	z-index: 400;

	.pageActionButtons {
		display: flex;
		flex: 0 auto;
		overflow: auto;
	}

	.pageActionButtons,
	.pageActionButtonToTop {
		pointer-events: all;
	}

	.pageActionButton {
		display: flex;
		flex: 0 0 auto;
		white-space: nowrap;

		&:not(:first-child) {
			margin-left: 5px;
		}

		&.remove {
			opacity: 0 !important;
			visibility: hidden !important;
		}
	}

	.pageActionButton,
	.pageActionButtonToTop {
		opacity: 0;
		transition: visibility 0.12s linear, opacity 0.12s linear;
		visibility: hidden;

		&[aria-hidden="false"] {
			opacity: 1;
			visibility: visible;
		}
	}

	.pageActionButtonToTop {
		align-self: flex-start;
		flex: 0 0 auto;
		margin-left: 5px;
		padding: 2px;
	}

	@include screen-sm-down {
		/* The iOS bottom touch zone is approximately 44px high. Any touches within will show the
		   menu instead of registering any touch on a button. */
		bottom: 44px;

		&.scrolledDown .pageActionButton,
		&.scrolledDown .pageActionButtonToTop {
			opacity: 0;
			visibility: hidden;
			transition-delay: 0.4s;
		}
	}
}

.pageOverlayActive .pageAction {
	display: none;
}

@include screen-xs {
	.redactorActive .pageAction {
		display: none !important;
	}
}