/* Scroll-to-top button (inc/scroll-top.php). Side (left/right) is set
   inline per-request in wp_head, since that's a property choice, not a
   value a custom property can carry — everything else here is vars. */

#nonotami-scroll-top {
	position: fixed;
	bottom: var( --nonotami-scrolltop-margin-bottom, 1.5rem );
	width: var( --nonotami-scrolltop-size, 3rem );
	height: var( --nonotami-scrolltop-size, 3rem );
	border-radius: var( --nonotami-scrolltop-radius, 50% );
	background: var( --nonotami-scrolltop-bg, #1a1a1a );
	color: var( --nonotami-scrolltop-icon-color, #fff );
	/* Resets css/typography.css's generic `button` rule (padding, border,
	   font-size) — an ID selector already out-specifies that plain-type
	   one, but its padding alone was eating most of this button's fixed
	   box, squeezing the svg (sized relative to it) down to near
	   nothing. box-sizing: border-box so the padding reset actually
	   lands at 0 rather than being measured some other way. */
	padding: 0;
	border: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 0.5rem );
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

#nonotami-scroll-top svg {
	display: block;
	width: 45%;
	height: 45%;
	flex-shrink: 0;
}

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

#nonotami-scroll-top:hover {
	opacity: 0.85;
}