.hayn-scroll-to-top {
	position: fixed;

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

	width: var(--hayn-stt-size);
	height: var(--hayn-stt-size);

	right: var(--hayn-stt-desktop-side);
	bottom: var(--hayn-stt-desktop-bottom);
	left: auto;

	padding: 0;
	margin: 0;

	background: var(--hayn-stt-bg);
	border: 1px solid transparent;
	border-color: transparent;
	border-radius: var(--hayn-stt-radius);

	color: var(--hayn-stt-arrow);
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.25s ease,
		background-color 0.25s ease;

	z-index: 99990;

	-webkit-appearance: none;
	appearance: none;
}

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

.hayn-scroll-to-top.has-shadow {
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14);
}

.hayn-scroll-to-top.has-border {
	border-color: var(--hayn-stt-border);
}

.hayn-scroll-to-top:hover {
	transform: translateY(-2px);
}

.hayn-scroll-to-top:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.hayn-scroll-to-top svg {
	width: 48%;
	height: 48%;
	display: block;
}

.hayn-stt-left {
	left: var(--hayn-stt-desktop-side);
	right: auto;
}

.hayn-stt-right {
	right: var(--hayn-stt-desktop-side);
	left: auto;
}

.hayn-stt-desktop {
	display: flex;
}

.hayn-stt-mobile {
	display: none;
}

@media (max-width: 781px) {
	.hayn-stt-desktop {
		display: none;
	}

	.hayn-stt-mobile,
	.hayn-stt-both {
		display: flex;
	}

	.hayn-scroll-to-top {
		bottom: var(--hayn-stt-mobile-bottom);
	}

	.hayn-stt-left {
		left: var(--hayn-stt-mobile-side);
		right: auto;
	}

	.hayn-stt-right {
		right: var(--hayn-stt-mobile-side);
		left: auto;
	}
}

@media (min-width: 782px) {
	.hayn-stt-mobile {
		display: none;
	}

	.hayn-stt-desktop,
	.hayn-stt-both {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hayn-scroll-to-top {
		transition: opacity 0.15s ease, visibility 0.15s ease;
	}

	.hayn-scroll-to-top:hover {
		transform: none;
	}
}