/**
 * Base Theme - back to top button.
 *
 * Loaded only when the button is enabled. See inc/enqueue.php.
 */

.base-to-top {
	position: fixed;
	right: var(--wp--preset--spacing--lg);
	bottom: var(--wp--preset--spacing--lg);
	z-index: 100;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;

	color: var(--wp--preset--color--text-inverse);
	background-color: var(--wp--preset--color--secondary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--md);
	cursor: pointer;

	/* Hidden by default, and inert while hidden: a button a sighted reader
	   cannot see should not be reachable by Tab either. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition:
		opacity var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		visibility var(--wp--custom--transition--base);
}

.base-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.base-to-top:hover {
	background-color: var(--wp--preset--color--primary);
}

.base-to-top:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

.base-to-top svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* The admin bar sits over the bottom of the viewport on small screens. */
@media screen and (max-width: 782px) {
	.admin-bar .base-to-top {
		bottom: calc(var(--wp--preset--spacing--lg) + var(--base-admin-bar-height, 0px));
	}
}

/* Honour the reader's motion preference for the appearance transition too,
   not just the scroll. */
@media (prefers-reduced-motion: reduce) {
	.base-to-top {
		transition: none;
		transform: none;
	}
}