/*
 * Makira Back to Top - frontend styles.
 *
 * Size, position, offsets, and colors are all set per-site via inline CSS
 * custom properties written in class-back-to-top.php (render_button()).
 * This file only defines the shape/animation/position variants and the
 * shared hover/transition behavior.
 */

.makira-back-to-top {
	position: fixed;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --makira-btt-size, 44px );
	height: var( --makira-btt-size, 44px );
	background-color: var( --makira-btt-bg, #222222 );
	color: var( --makira-btt-color, #ffffff );
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 250ms ease, transform 250ms ease, background-color 200ms ease, color 200ms ease;
}

.makira-back-to-top:hover,
.makira-back-to-top:focus-visible {
	background-color: var( --makira-btt-bg-hover, #000000 );
	color: var( --makira-btt-color-hover, #ffffff );
}

.makira-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.makira-back-to-top__icon-img {
	display: block;
	width: 55%;
	height: 55%;
	object-fit: contain;
	pointer-events: none;
}

/* --- Shape --- */
.makira-back-to-top--circle {
	border-radius: 50%;
}

.makira-back-to-top--rounded {
	border-radius: 8px;
}

.makira-back-to-top--square {
	border-radius: 0;
}

/* --- Shadow --- */
.makira-back-to-top--shadow {
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
}

/* --- Position --- */
.makira-back-to-top--pos-bottom-right {
	right: var( --makira-btt-offset-x, 24px );
	bottom: var( --makira-btt-offset-y, 24px );
}

.makira-back-to-top--pos-bottom-left {
	left: var( --makira-btt-offset-x, 24px );
	bottom: var( --makira-btt-offset-y, 24px );
}

.makira-back-to-top--pos-bottom-center {
	left: 50%;
	bottom: var( --makira-btt-offset-y, 24px );
	transform: translateX( -50% );
}

.makira-back-to-top--pos-bottom-center.makira-back-to-top--anim-slide-up:not( .is-visible ) {
	transform: translateX( -50% ) translateY( 16px );
}

.makira-back-to-top--pos-bottom-center.is-visible {
	transform: translateX( -50% );
}

/* --- Animation (starting/hidden state each style animates FROM) --- */
.makira-back-to-top--anim-slide-up:not( .is-visible ):not( .makira-back-to-top--pos-bottom-center ) {
	transform: translateY( 16px );
}

.makira-back-to-top--anim-scale:not( .is-visible ) {
	transform: scale( 0.7 );
}

.makira-back-to-top--anim-none {
	transition: background-color 200ms ease, color 200ms ease;
}

/* --- Mobile visibility --- */
@media ( max-width: 767px ) {
	.makira-back-to-top--desktop-only {
		display: none;
	}
}

/* Accessibility: skip the appear animation for visitors who've asked for
   reduced motion - it can still show/hide, just without the transition. */
@media ( prefers-reduced-motion: reduce ) {
	.makira-back-to-top {
		transition: background-color 200ms ease, color 200ms ease;
	}
}