.ct-back-to-top {
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin: 25px;
	color: var(--linkInitialColor);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 15px, 0);
	background: var(--buttonInitialColor);
	box-shadow: 0px 5px 20px 0px rgba(210, 213, 218, 0.2);
	transition: opacity 0.3s ease,
				color 0.3s ease,
				background 0.3s ease,
				transform 0.3s ease,
				visibility 0.3s ease;

	&:hover {
		color: var(--linkHoverColor);
		background: var(--buttonHoverColor);
	}

	svg {
		fill: currentColor;
	}

	&.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="right"] {
		right: 0;
	}
}

// With passepartout
.ct-passepartout {
	.ct-back-to-top {
		&[data-alignment="right"] {
			right: var(--passepartoutSize);
			bottom: var(--passepartoutSize);
		}

		&[data-alignment="left"] {
			left: var(--passepartoutSize);
			bottom: var(--passepartoutSize);
		}
	}
}