/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

 :root {
	--ck-merge-fields-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal) * 0.45);
	--ck-merge-fields-paddings-vertical: 2px;

	--ck-color-merge-fields-form-error-background: hsl(15, 100%, 97%);

	--ck-color-merge-fields-outline: hsl(218, 82%, 57%);
	--ck-color-merge-fields-value-outline: hsl(0, 0%, 57%);
	--ck-color-merge-fields-with-warning-outline: hsl(15, 80%, 59%);

	--ck-color-merge-fields-affix-color: hsl(218, 82%, 57%);
}

.ck .ck-merge-field {
	white-space: nowrap;
	margin: 0 1px 0 2px;
	outline-offset: 0;
	border-radius: 2px;
	padding: 0;
	/* line-height: 0; */
	-webkit-user-select: none;

	&:hover {
		transition: none;
		cursor: default;
	}

	&:not(:hover):not(.ck-widget_selected) {
		outline: 1px solid var(--ck-color-merge-fields-outline);
	}

	&.ck-merge-field_with-warning {
		white-space: normal;

		&:not(:hover):not(.ck-widget_selected) {
			outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
		}
	}

	&.ck-merge-field_with-value {
		white-space: normal;

		&:not(:hover):not(.ck-widget_selected) {
			outline: 1px solid var(--ck-color-merge-fields-value-outline);
		}
	}

	& .ck-merge-field__icon {
		padding: 0 0.15em;
		position: relative;
		top: -1px;
	}

	& .ck.ck-icon {
		height: var(--ck-merge-fields-icon-size);
		width: var(--ck-merge-fields-icon-size);
	}

	& .ck-merge-field__affix {
		font-family: Arial, sans-serif;
		position: relative;
		top: -0.15em;
		font-size: 0.85em;
		color: var(--ck-color-merge-fields-affix-color);

		&:first-child {
			padding-left: 0.25em;
			padding-right: 0.15em;
		}

		&:last-child {
			padding-left: 0.15em;
			padding-right: 0.25em;
		}
	}
}

.ck .ck-merge-fields-form {
	padding: var(--ck-spacing-medium);

	& .ck-merge-fields-form__status {
		display: flex;
		justify-content: center;
		align-items: center;

		padding: var(--ck-spacing-medium);
		border-radius: 2px;
		line-height: 2.25em;

		color: var(--ck-color-base-text);
		background-color: var(--ck-color-merge-fields-form-error-background);
	}
}

/* stylelint-disable no-descending-specificity */
.ck pre code .ck-merge-field .ck-merge-field__affix {
	font-family: inherit;
	position: relative;
	top: 0;
	font-size: inherit;

	&:first-child {
		padding-left: 0.15em;
		padding-right: 0.18em;
	}

	&:last-child {
		padding-left: 0.18em;
		padding-right: 0.15em;
	}
}