/* ══════════════════════════════════════════════════ *
 * MARK: Wrapper
 * ────────────────────────────────────────────────── */
.cvh--back-to-top__wrap {
	--elem-space-y: var(--cvh-space-m);
	position: fixed;
	bottom: var(--elem-space-y);
	right: var(--cvh-space-m);
	z-index: 950;
	transition-property: transform;
}

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

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

	/* #════ Animation Methods ════# */
	/* +──── Slide ────+ */
.cvh--back-to-top__wrap[data-animation-method="slide"][data-on-screen="false"] {
	transform: translateY(calc(100% + (var(--elem-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
 * ────────────────────────────────────────────────── */
	/* #=#=#=#=#=# 2.1 Tag #=#=#=#=#=# */
button#cvh--site-btt-button {
	--btn-padding: var(--cvh-space-xs);
	--btn-animation-speed: 0.75s;
	display: block;
	position: relative;
	isolation: isolate;
	aspect-ratio: 1;
	overflow: hidden;
	font-size: var(--text-xl);
	background-color: unset;
	border-radius: var(--cvh-border-radius-m);
}

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

:where(:root[data-dom-state="ready"]) button#cvh--site-btt-button::after {
	transition: var(--cvh-transition-normal);
}

button#cvh--site-btt-button::after {
	display: block;
	content: '\0A';
	position: absolute;
	z-index: -5;
	inset: 0px;
	background-color: var(--cs-major, var(--cvh-color-page));
	opacity: 0.90;
}

	/* #=#=#=#=#=# 2.3 Icons #=#=#=#=#=# */
button#cvh--site-btt-button > span {
	display: block;
	position: absolute;
	left: 50%;
}

button#cvh--site-btt-button > span:first-child {
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

button#cvh--site-btt-button > span:last-child {
	top: 50%;
	transform: translateX(-50%) translateY(calc(-50% + var(--cvh-space-l)));
}


	/* #=#=#=#=#=# 2.4 Effects #=#=#=#=#=# */
	/* ~~~ Hover ~~~ */
button#cvh--site-btt-button:is(:hover, :focus-visible) {
	background-color: unset;
}

button#cvh--site-btt-button:is(:hover, :focus-visible)::after {
	background-color: var(--cs-major, var(--cvh-color-button-bg-dynamic));
	opacity: 1;
}

	/* Spans */
button#cvh--site-btt-button:is(:hover, :focus-visible) > span {
	animation-fill-mode: forwards;
	animation-duration: var(--btn-animation-speed);
}

button#cvh--site-btt-button:is(:hover, :focus-visible) > span:first-child {
	animation-name: btt-scrollUp;
}

button#cvh--site-btt-button:is(:hover, :focus-visible) > span:last-child {
	animation-name: btt-scrollUp-duplicate;
	animation-delay: var(--btn-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%);
	}
}