.custom-field {
	width: 100%;
	min-height: 32px;
	position: relative;

	&.custom-field--textarea {
		&.custom-field--edit .custom-field__content {
			align-items: flex-start;
		}

		.custom-field__input {
			padding: 4px 4px 4px 8px;
			resize: none;
			overflow-y: auto;
			min-height: 100px;
		}

		.custom-field__limiter {
			position: absolute;
			top: 2px;
			right: 2px;
		}
	}

	&.custom-field--edit {
		&.custom-field--edit-mode-inline {
			--box-shadow: 0 0 0 2px var(--base-txt-link-minor, #09F);
		}

		&.custom-field--edit-mode-inline.custom-field--error {
			--box-shadow: 0 0 0 2px var(--base-txt-alert-minor);

			.custom-field__icon {
				--icon-color: var(--base-txt-alert-minor);
			}
		}
	}

	&.custom-field--user {
		.custom-field__ava-container {
			padding-left: 2px;
			transform: scale(1.166667);
		}

		.custom-field__value {
			padding-left: 10px;
		}
	}

	&.custom-field--display {
		&.custom-field--error {
			--box-shadow: 0 0 0 2px var(--base-txt-alert-minor);

			.custom-field__icon {
				--icon-color: var(--base-txt-alert-minor);
			}

			.custom-field__error-icon {
				display: block;
			}
		}
	}
}


.custom-field__empty,
.custom-field__display,
.custom-field__edit {
	display: flex;
	padding: 0 6px;
	align-items: center;
	gap: 4px;
	border-radius: 6px;
	width: 100%;
	height: 100%;
	min-height: 32px;
	box-shadow: var(--box-shadow, none);

	&, * {
		box-sizing: border-box;
	}

	> * {
		flex-shrink: 1;
		min-width: 0;
	}

	&:hover {
		background: rgba(from var(--base-hlt-g-easy) at 0.02);

		.custom-field__actions {
			display: flex;
		}
	}

	.custom-field__content {
		display: flex;
		padding: 2px;
		align-items: center;
		flex: 1 0 0;
		max-width: 100%;
	}

	.custom-field__value,
	.custom-field__placeholder,
	.custom-field__input {
		width: 100%;
		padding: 0 4px 0 8px;
		font: var(--font-ui-13-small-med);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.custom-field__hint-icon {
		--icon-color: var(--base-txt-tertiary);
	}

	.custom-field__actions,
	.custom-field__hint-icon,
	.custom-field__error-icon {
		cursor: pointer;
		display: none;
	}

	.custom-field__error-icon {
		cursor: pointer;
		--icon-color: var(--base-txt-alert-minor);
	}

	.custom-field__actions {
		gap: 4px;
	}

	.custom-field__limiter {
		font: var(--font-ui-10-nano-med);
		color: var(--base-txt-btn-flip);
		background: var(--base-txt-link-minor);
		display: flex;
		min-width: 16px;
		padding: 0 4px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		position: relative;
		top: -6px;
		right: -2px;

		&.custom-field__limiter--error {
			background: var(--base-txt-alert-minor);
		}
	}

	.custom-field__icon {
		--icon-size: 16px;
		--icon-color: var(--base-txt-secondary);
		display: flex;
		height: 28px;
		min-width: 28px;
		justify-content: center;
		align-items: center;

		&, & > button {
			border-radius: 50px;
		}
	}
}


.custom-field__empty {
	&:hover .custom-field__hint-icon {
		display: flex;
	}

	.custom-field__icon,
	.custom-field__switch-container {
		border: 1px dashed var(--base-txt-secondary);
	}

	.custom-field__placeholder {
		color: var(--base-txt-tertiary);
	}

	.custom-field__switch-container {
		background: transparent;
	}
}


.custom-field__display {
	.custom-field__value {
		color: var(--base-txt-primary);
		white-space: nowrap;
	}
}


.custom-field__edit {
	padding: 0 2px 0 6px;
	background: var(--base-cont-input);

	.custom-field__icon {
		--icon-color: var(--base-txt-btn-a);
	}

	.custom-field__input {
		color: var(--base-txt-accent);
		outline: none;
		border: none;
		flex: 1 0 0;
		background: transparent;

		&::placeholder {
			color: var(--base-txt-muted);
			font-style: normal;
		}

		&[type="number"] {
			-moz-appearance: textfield;

			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}

	.custom-field__edit-row-content {
		width: 100%;
	}
}


.custom-field__switch-container {
	display: flex;
	height: 28px;
	min-width: 28px;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background: var(--base-hlt-g-hover, rgba(0, 31, 61, 0.05));

	.sw_pre {
		display: flex;
		justify-content: center;
		align-items: center;

		.sw {
			box-shadow: 0 0 0 1px var(--base-txt-secondary) inset;
			margin: 0;

			span {
				background: var(--base-txt-secondary);
			}
		}

		&.sw_act .sw {
			box-shadow: 0 0 0 1px var(--base-hlt-invert) inset;
		}
	}
}


.custom-field__edit--menu {
	display: none;

	&.menu-active {
		display: flex;
		padding: 12px;
		height: auto;
		min-height: 0;
		border-radius: 16px;
		background: var(--base-cont-top);
		box-shadow: 0 0 0 1px var(--shadow-outline-200),
		0 2px 12px -2px var(--shadow-color-fx-400);

		.custom-field__content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px;
			padding: 0;
			width: 100%;
			max-width: 100%;
		}

		.custom-field__edit-row {
			display: flex;
			align-items: center;
			gap: 6px;
			width: 100%;

			.custom-field__icon {
				--icon-size: 16px;
				--icon-color: var(--base-txt-tertiary);
				flex-shrink: 0;

				&, & > button {
					border-radius: 50px;
				}
			}
		}

		.custom-field__edit-row-content {
			display: flex;
			height: 32px;
			padding: 2px;
			align-items: center;
			flex: 1 0 0;
			min-width: 0;
			border-radius: 8px;
			background: var(--base-cont-mod-trans-low);

			&:focus-within {
				background: var(--base-cont-input);
				box-shadow: 0 0 0 2px var(--base-txt-link-minor);
			}

			&.custom-field__edit-row-content--error {
				box-shadow: 0 0 0 2px var(--base-txt-alert-minor);

				.custom-field__error-icon {
					display: block;
				}
			}

			.custom-field__input {
				flex: 1 0 0;
				min-width: 0;
				width: auto;
				padding: 0 4px 0 8px;
				font: var(--font-ui-13-small-med);
				color: var(--base-txt-accent);
				background: transparent;
				outline: none;
				border: none;
				overflow: hidden;
				text-overflow: ellipsis;

				&::placeholder {
					color: var(--base-txt-muted);
					font-style: normal;
				}
			}

			.custom-field__icon {
				--icon-color: var(--base-txt-btn-a);
				border-radius: 6px;
				cursor: pointer;

				button {
					border-radius: 6px;
				}
			}
		}
	}
}

.custom-field--grid {
	display: inline-block;
	width: 100%;
	height: 100%;

	.custom-field__input,
	.custom-field__value,
	.custom-field__unit {
		font: var(--font-ui-13-small-reg);
	}

	.custom-field__placeholder {
		padding: 0 4px 0 0;
		font: var(--font-ui-11-micro-reg);
	}

	.custom-field__empty {
		.custom-field__icon,
		.custom-field__switch-container {
			border: none;
		}
	}

	.custom-field__edit, .custom-field__display, .custom-field__empty {
		border-radius: 0;
		padding: 0 6px;

		.custom-field__icon {
			--icon-color: var(--base-txt-tertiary);
		}

		.custom-field__unit {
			color: var(--base-txt-tertiary);
			min-width: 28px;
			text-align: center;
		}
	}

	&.custom-field--display, &.custom-field--empty {
		&.custom-field--edit-mode-inline {
			&:hover {
				box-shadow: 0 0 0 1px var(--base-hlt-invert-minor) inset;
				background: var(--base-cont-mid, #F9FAFB);
			}
		}
	}

	&.custom-field--edit {
		&.custom-field--edit-mode-inline {
			--box-shadow: 0 0 0 2px var(--base-line-act-major) inset;
			background: var(--base-cont-top, #FFF);

			.custom-field__input {
				font: var(--font-ui-13-small-reg);
			}
		}
	}

	&.custom-field--number_with_unit,
	&.custom-field--percent {
		.custom-field__input, .custom-field__display .custom-field__content {
			text-align: right;
		}
	}

	&.custom-field--percent {
		.custom-field__display {
			background: linear-gradient(to right, var(--base-hlt-selected) var(--percent, 0), transparent var(--percent));

			&.custom-field__display--over {
				background: var(--base-hlt-w-easy);
				.custom-field__unit {
					color: var(--base-txt-alert-major);
				}
			}
		}
		.custom-field__edit {
			&.custom-field__edit--over {
				.custom-field__unit {
					color: var(--base-txt-alert-major);
				}
			}
		}

		.pie_percent, .pie_percent_over {
			circle {
				&.fill {
					stroke: var(--base-line-ghost);
				}

				&.draw {
					stroke: var(--base-hlt-invert-minor);
				}

				&.draw_over {
					stroke: var(--base-line-alert);
				}
			}

		}

	}

	&.custom-field--boolean {
		.custom-field__placeholder {
			padding: 0 4px 0 8px;
		}
		&[value="true"] {
			.custom-field__display {
				background: linear-gradient(0deg, var(--colorize-lbl-aqua-bg, ) 0%, var(--colorize-lbl-aqua-bg) 100%), var(--base-hlt-g-easy);
			}
		}
	}

}