$top-offset: 12px;

.ct-background-modal,
.ct-color-picker-modal {
	--cpm-pv: 20px;
	--cpm-ph: 16px;
}


.ct-color-picker-modal {
	width: var(--modalWidth, 295px);
	border-radius: 8px;

	// modal arrow
	&[data-position='bottom'] {
		.ct-arrow {
			top: -12px;
		}
	}

	&[data-position='top'] {
		.ct-arrow {
			bottom: -12px;
		}
	}

	.ct-arrow {
		position: absolute;
		z-index: 1;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 6px 7px 6px;
		border-color: transparent transparent red transparent;
	}
}

.ct-color-modal-wrapper {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	z-index: 20;
}