.container-scroll-to-top {
	position: sticky;
	bottom: 0;
	z-index: 102;
}

.scroll-to-top {
	--button-size: 44px;
	display: none;

	position: absolute;
	bottom: var(--size-8);
	right: var(--size-8);

	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	background-color: var(--color-white);
	color: var(--color-black);
	border: 1px solid var(--color-black);
	border-radius: var(--radius-full);
	cursor: pointer;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, background-color 0.2s ease;


	svg {
		width: var(--size-6);
		height: var(--size-6);
		flex-shrink: 0;
	}

	&:hover {
		border: 2px solid var(--color-black);
		animation: bounce-up 0.5s ease;
	}

	&:focus-visible {
		outline: 1px solid var(--color-black);
		outline-offset: 0;
	}

	&.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	@media (min-width: 1280px) {
		display: flex;
	}
}