/*
 * Magic Scroller For Virtuemart - scroll to top button.
 *
 * Everything worth changing is a custom property, so a template can restyle the
 * button by redeclaring them rather than having to out-specify the rules below:
 *
 *   .vmmscroll-top {
 *       --vmmscroll-top-offset: 2rem;   / distance from the page edges  /
 *       --vmmscroll-top-size:   3.5rem; / width and height              /
 *       --vmmscroll-top-bg:     #333;
 *       --vmmscroll-top-color:  #fff;
 *       --vmmscroll-top-radius: 4px;    / 50% gives a circle            /
 *   }
 *
 * To move it to the bottom left instead, override the two position properties:
 *
 *   .vmmscroll-top { right: auto; left: var(--vmmscroll-top-offset); }
 */

.vmmscroll-top {
	--vmmscroll-top-offset: 1.5rem;
	--vmmscroll-top-size: 2.75rem;
	--vmmscroll-top-bg: rgba(33, 37, 41, 0.85);
	--vmmscroll-top-bg-hover: rgba(33, 37, 41, 1);
	--vmmscroll-top-color: #fff;
	--vmmscroll-top-radius: 50%;
	--vmmscroll-top-zindex: 1030;

	position: fixed;
	right: var(--vmmscroll-top-offset);
	bottom: var(--vmmscroll-top-offset);
	z-index: var(--vmmscroll-top-zindex);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vmmscroll-top-size);
	height: var(--vmmscroll-top-size);
	padding: 0;

	color: var(--vmmscroll-top-color);
	background-color: var(--vmmscroll-top-bg);
	border: 0;
	border-radius: var(--vmmscroll-top-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;

	/* Hidden until the visitor has scrolled far enough to want it. Kept in the DOM
	   and faded rather than display:none so the transition has something to run on;
	   visibility keeps it out of the tab order while hidden. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

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

.vmmscroll-top:hover,
.vmmscroll-top:focus {
	background-color: var(--vmmscroll-top-bg-hover);
	color: var(--vmmscroll-top-color);
}

/* Keyboard users need to see where focus is; the default outline is often invisible
   against the dark fill, so draw our own just outside the button. */
.vmmscroll-top:focus-visible {
	outline: 2px solid var(--vmmscroll-top-color);
	outline-offset: 2px;
}

.vmmscroll-top svg {
	width: 45%;
	height: 45%;
	fill: currentColor;
	pointer-events: none;
}

/* Some people get motion sick from movement they did not ask for, and the browser
   tells us when they have asked for less of it. */
@media (prefers-reduced-motion: reduce) {
	.vmmscroll-top {
		transition: none;
		transform: none;
	}
}

@media print {
	.vmmscroll-top {
		display: none;
	}
}