/* The "To top" button (assets/js/to-top.js). Part of the RUB Chair theme. */

/* -------------------------------------------------------------------------
 * "To top" button: appears once the page has been scrolled (to-top.js)
 * ---------------------------------------------------------------------- */

/* RUB blue with a Hellblau edge, so the button stands out on white and
   on the light areas alike. */
.rub-to-top {
	background-color: var(--rub-blue);
	border-bottom: 3px solid var(--rub-accent);
	bottom: 2rem;
	box-shadow: 0 2px 8px rgb(0 53 96 / 30%);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	min-height: 2.75rem;
	opacity: 0;
	padding: 0 0.625rem 0.375rem;
	position: fixed;
	/* In the margin right of the content when there is room, else at the edge. */
	right: max(1rem, (100% - var(--wp--style--global--content-size, 1248px)) / 2 - 6rem);
	text-align: center;
	text-decoration: none;
	transition: opacity 0.3s ease-in-out, visibility 0.3s, background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
	visibility: hidden;
	width: 5rem;
	z-index: 90;
}

/* The arrow: Lucide's arrow-up (assets/icons/), in the button's colour. */
.rub-to-top::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 1.25rem;
	margin: 0.3rem auto 0.15rem;
	mask: url("../icons/arrow-up.svg") center / contain no-repeat;
	width: 1.25rem;
}

.rub-to-top.is-visible {
	/* Slightly see-through, so it covers less of the text below; full on hover. */
	opacity: 0.85;
	visibility: visible;
}

.rub-to-top:hover,
.rub-to-top:focus-visible {
	background-color: var(--rub-blue-dark);
	color: #fff;
	opacity: 1;
}

/* The script focuses the page after scrolling up; no frame around all of it. */
body:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.rub-to-top {
		transition: none;
	}
}