@layer components {
	.klt-page-controls {
		position: fixed;
		z-index: 90;
		right: clamp(0.75rem, 2vw, 1.25rem);
		bottom: clamp(0.75rem, 2vw, 1.25rem);
		display: flex;
		flex-direction: column;
		gap: var(--klt-space-xs);
		align-items: flex-end;
		pointer-events: none;
	}

	.klt-page-controls > * {
		border-color: var(--klt-color-border, ButtonBorder);
		/* A floating control must stay legible over arbitrary page media. */
		background: var(--klt-page-control-background, var(--klt-color-surface, Canvas)) !important;
		color: var(--klt-page-control-color, var(--klt-color-text, CanvasText));
		pointer-events: auto;
	}

	.klt-page-control--icon {
		justify-content: center;
		inline-size: 2.75rem;
		padding-inline: 0;
	}

	.klt-page-control__icon {
		display: inline-flex;
		inline-size: 1.125rem;
		block-size: 1.125rem;
	}

	.klt-page-control__icon .klt-icon {
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	.klt-page-controls__back-to-top.is-ready {
		opacity: 0;
		pointer-events: none;
		transform: translateY(1.25rem);
		visibility: hidden;
		transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms !important;
	}

	.klt-page-controls__back-to-top.is-ready.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
		transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.klt-page-controls__back-to-top.is-ready {
			transition: none !important;
		}
	}
}