/* ══════════════════════════════════════════════════ *
 * MARK: Wrapper
 * ────────────────────────────────────────────────── */
.cvh--back-to-top__wrap {
	--cs-major: var(--white);
	--cs-minor: var(--primary);

	--_btt--space-y: var(--cvh-space-m);
	--_btt--border-radius: 99vw;
	--_btt--padding: var(--cvh-space-xs);
	--_btt--animation-speed: 0.75s;

	position: fixed;
	bottom: var(--_btt--space-y);
	right: var(--cvh-space-m);
	z-index: 950;
	transition-property: transform;


	& .cvh--back-to-top__inner {
		box-shadow: 0 0 30px -15px var(--base-dark);
		border-radius: var(--_btt--border-radius);
	}
}

:where(:root[data-dom-state="ready"]) .cvh--back-to-top__wrap[data-on-screen] {
	transition: var(--cvh-transition-normal);
}

	/* #════ Animation Methods ════# */
	/* +──── Slide ────+ */
.cvh--back-to-top__wrap[data-animation-method="slide"][data-on-screen="false"] {
	transform: translateY(calc(100% + (var(--_btt--space-y) * 2)));
}

.cvh--back-to-top__wrap[data-animation-method="slide"][data-on-screen="true"] {
	transform: translateY(0px);
}


	/* +──── Fade ────+ */
.cvh--back-to-top__wrap[data-animation-method="fade"][data-on-screen="false"] {
	animation: btt-fadeout var(--cvh-transition-normal) forwards;
}

.cvh--back-to-top__wrap[data-animation-method="fade"][data-on-screen="true"] {
	animation: btt-fadein var(--cvh-transition-normal) forwards;
}


/* ══════════════════════════════════════════════════ *
 * MARK: Button
 * ────────────────────────────────────────────────── */
	/* #=#=#=#=#=# Tag #=#=#=#=#=# */
button#cvh--site-btt-button {
	display: block;
	position: relative;
	isolation: isolate;
	aspect-ratio: 1;
	overflow: hidden;
	font-size: var(--text-xl);
	color: var(--cs-minor);
	background-color: unset;
	border-radius: inherit;
	border-color: var(--white);


	/* #=#=#=#=#=# Button Pseudos #=#=#=#=#=# */
	&::before {
		display: block;
		content: '\0A';
		height: 1em;
		aspect-ratio: 0.8;
	}

	&::after {
		display: block;
		content: '\0A';
		position: absolute;
		z-index: -5;
		inset: 0px;
		background-color: var(--cs-major, var(--cvh-color-page));
		border-radius: inherit;
		opacity: 0.90;
		transition: var(--cvh-transition-normal);
	}


	/* #=#=#=#=#=# Icons #=#=#=#=#=# */
	& > span {
		color: inherit;
		display: block;
		position: absolute;
		left: 50%;

		&:first-child {
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}

		&:last-child {
			top: 50%;
			transform: translateX(-50%) translateY(calc(-50% + var(--cvh-space-l)));
		}
	}


	/* #=#=#=#=#=# Hover #=#=#=#=#=# */
	&:is(:hover, :focus-visible) {
		color: var(--cs-major);
		background-color: unset;

		&::after {
			background-color: var(--cs-minor, var(--cvh-color-button-bg-dynamic));
			opacity: 1;
		}

		& > span {
			animation-fill-mode: forwards;
			animation-duration: var(--_btt--animation-speed);

			&:first-child {
				animation-name: btt-scrollUp;
			}

			&:last-child {
				animation-name: btt-scrollUp-duplicate;
				animation-delay: var(--_btt--animation-speed);
			}
		}
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: Animation
 * ────────────────────────────────────────────────── */
@keyframes btt-fadeout {
	from {
		opacity: 1;
		display: block;
	}
	
	to {
		opacity: 0;
		display: none;
	}
}

@keyframes btt-fadein {
	from {
		opacity: 0;
		display: block;
	}
	
	to {
		opacity: 1;
	}
}


@keyframes btt-scrollUp {	
	50% {
		transform: translateX(-50%) translateY(calc(-50% + 10px));
	}
	
	to {
		transform: translateX(-50%) translateY(calc(-50% - var(--cvh-space-l)));
	}
}

@keyframes btt-scrollUp-duplicate {
	50% {
		transform: translateX(-50%) translateY(calc(-50% - 10px));
	}
	
	to {
		transform: translateX(-50%) translateY(-50%);
	}
}