.ct-back-to-top {
	position: fixed;
	z-index: 100;
	bottom: calc(var(--frame-size, 0px) + var(--back-top-bottom-offset, 25px));
	display: flex;
	align-items: center;
	justify-content: center;
	// width: 33px;
	// height: 33px;
	padding: 12px;
	color: var(--color);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 15px, 0);
	background: var(--backgroundColor);
	box-shadow: var(--box-shadow);
	transition: opacity 0.3s ease,
				color 0.3s ease,
				background 0.3s ease,
				transform 0.3s ease,
				visibility 0.3s ease;

	&:hover {
		color: var(--colorHover);
		background: var(--backgroundColorHover);
	}

	svg {
		fill: currentColor;
		width: var(--icon-size, 12px);
		height: var(--icon-size, 12px);
	}

	&.ct-show {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}

	// shape
	&[data-shape="square"] {
		border-radius: 2px;
	}

	&[data-shape="circle"] {
		border-radius: 100%;
	}

	&[data-alignment="left"] {
		left: calc(var(--frame-size, 0px) + var(--back-top-side-offset, 25px));
	}

	&[data-alignment="right"] {
		right: calc(var(--frame-size, 0px) + var(--back-top-side-offset, 25px));
	}
}