.ct-background {
	width: 38px;
	height: 38px;
	cursor: pointer;
	border-radius: 100%;
	margin-left: auto;
	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(--background-image);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: var(--background-position);
	}

	&[data-background-type='gradient'] {
		background-image: var(--background-image);
		background-size: cover;
		background-repeat: no-repeat;
	}

	// 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(--pattern-color);

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

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