.crm-template-editor__scope {
	--color-background: rgba(82,92,105,.08);
	--color-hover: rgba(82,92,105,.1);
	--color-text: var(--ui-color-text-subtle);
	--font-size: var(--ui-font-size-xs,);
	--font-weight: var(--ui-font-weight-semi-bold);
}

.crm-template-editor {
	word-break: keep-all;
	line-height: var(--ui-font-line-height-lg);
	font-size: var(--ui-font-size-lg);
}

.crm-template-editor-element-pill {
	background-color: var(--ui-color-accent-yellow);
	font-weight: var(--ui-typography-text-lg-font-weight);
	color: var(--ui-color-palette-black-solid);
	border-radius: var(--ui-border-radius-xs);
	line-height: 26px;
	position: relative;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	padding: 0 6px 0 6px;
	margin: 2px 4px 0 0;
}

.crm-template-editor:not(.--read-only) .crm-template-editor-element-pill {
	padding-right: 18px;
	cursor: pointer;
}

.crm-template-editor-element-pill.--selected {
	background-color: var(--ui-color-accent-soft-blue-2);
	color: var(--ui-color-accent-soft-element-blue);
	word-wrap: anywhere;
}

.crm-template-editor:not(.--read-only) .crm-template-editor-element-pill:after {
	content: '';
	position: absolute;
	right: 2px;
	top: 7px;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.306 4.754l-2.64 2.64L7 8.05l-.652-.655-2.641-2.641-.932.932 4.232 4.231 4.231-4.231-.931-.932z' fill='%23fff'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.306 4.754l-2.64 2.64L7 8.05l-.652-.655-2.641-2.641-.932.932 4.232 4.231 4.231-4.231-.931-.932z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-position: center;
	        mask-position: center;
	width: 14px;
	height: 14px;
	background-color: var(--ui-color-palette-black-solid);
}

.crm-template-editor-element-pill.--selected:after {
	background-color: var(--ui-color-palette-gray-90);
}

.crm-template-editor-element-pill.--flipped:after {
	transform: rotate(180deg);
}

.crm-template-editor-placeholder-selector-menu-item:after {
	content: '';
	position: absolute;
	right: var(--ui-space-inset-2xs2);
	top: calc(50% - 8px);
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 5.924l2.921 2.921L6 11.767l1.174 1.173 2.921-2.921 1.173-1.174L7.174 4.75 6 5.924z' fill='%23fff'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 5.924l2.921 2.921L6 11.767l1.174 1.173 2.921-2.921 1.173-1.174L7.174 4.75 6 5.924z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-position: center;
	        mask-position: center;
	width: 17px;
	height: 17px;
	background-color: var(--ui-color-palette-black-solid);
}

#crm-template-editor-placeholder-selector .menu-popup-no-icon .menu-popup-item-text {
	padding: 0 30px 0 15px;
}

.crm-template-editor-text-popup-wrapper {
	width: 400px;
	position: relative;
	border: var(--ui-border-width-thin) var(--ui-text-decoration-style-solid) var(--ui-color-palette-blue-50);
	border-radius: var(--ui-border-radius-2xs);
	padding: var(--ui-space-inset-2xs2) var(--ui-space-inset-sm2);
}

.crm-template-editor-text-popup-wrapper input {
	border: none;
	width: 100%;
	line-height: var(--ui-font-line-height-md);
	font-size: var(--ui-font-size-lg);
	color: var(--ui-color-palette-black-solid);
}

.crm-template-editor-preview-popup-wrapper {
	max-width: 400px;
	width: 400px;
	position: relative;
	padding: var(--ui-space-inset-2xs2) var(--ui-space-inset-sm2);
}

.crm-template-editor-preview-popup-wrapper .crm-template-editor-preview-popup-title {
	line-height: var(--ui-font-line-height-md);
	font-size: var(--ui-font-size-sm);
	color: var(--ui-color-palette-gray-60);
}

.crm-template-editor-preview-popup-wrapper .crm-template-editor-preview-popup-content {
	font-size: var(--ui-font-size-lg);
	line-height: var(--ui-font-line-height-lg);
	color: var(--ui-color-palette-gray-90);
	overflow-wrap: break-word;
	padding-top: 10px;
}

.crm-template-editor-preview-popup-content.--loaded {
	animation: crm-template-editor-preview-popup-content-show 750ms ease-in-out both;
}

#crm-template-editor-text-popup .popup-window-buttons {
	padding: 16px 0 0;
	text-align: left;
}

.crm-template-editor-preview-link {
	padding-top: 14px;
	color: var(--ui-color-palette-gray-70);
	width: -webkit-fit-content;
	width: fit-content;
}

.crm-template-editor-preview-link:hover {
	cursor: pointer;
	color: var(--ui-color-palette-gray-90);
}

.--hidden {
	display: none;
}

@keyframes crm-template-editor-preview-popup-content-show {
	from { opacity: 0; }
	to { opacity: 1; }
}