.ct-back-to-top {
	position: fixed;
	z-index: 100;
	bottom: var(--bottom, 0);
	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(--boxShadow);
	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(--size);
		height: var(--size);
	}

	&.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: 25px;
	}

	&[data-alignment="right"] {
		right: 25px;
	}
}

// With passepartout
.ct-passepartout {
	.ct-back-to-top {
		bottom: calc(var(--passepartoutSize) + var(--bottom));

		&[data-alignment="right"] {
			right: calc(var(--passepartoutSize) + 25px);
		}

		&[data-alignment="left"] {
			left: calc(var(--passepartoutSize) + 25px);
		}
	}
}