.ct-background {
	width: 38px;
	height: 38px;
	cursor: pointer;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
	background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
					  linear-gradient(-45deg, #ddd 25%, transparent 25%),
					  linear-gradient(45deg, transparent 75%, #ddd 75%),
					  linear-gradient(-45deg, transparent 75%, #ddd 75%);
}

.ct-background-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: inherit;
	height: inherit;
	cursor: pointer;
	border-radius: inherit;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);

	&[data-background-type="image"] {
		background-image: var(--backgroundImage);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: var(--backgroundPosition);
	}

	// patterns
	&[data-background-type*="pattern"] {
		&:before {
			position: absolute;
			content: '';
			width: calc(100% - 2px);
			height: calc(100% - 2px);
			top: 1px;
			left: 1px;
			border-radius: 100%;
			background-color: var(--patternColor);

			mask: var(--patternMask);
			mask-size: 48px;
			mask-position: 50% 50%;
		}
	}

	&:hover {
		.ct-tooltip-top {
			opacity: 1;
			visibility: visible;
			transform: translate3d(0px, -43px, 0px);
		}
	}

	// sync
	&.no-color {
		background-color: #fff !important;
		will-change: transform;

		svg {
			width: 18px;
			height: 18px;
			fill: #555d66;
			animation: spin 4.5s infinite linear;
		}

		@keyframes spin {
			from {
				transform:rotate(0deg);
			}
			to {
				transform:rotate(360deg);
			}
		}
	}
}