.dynamic-variable-container {
	display: grid;
	grid-template-columns: 1fr 32px 200px;
	gap: 32px;
	align-items: center;
	width: 100%;
	margin: 24px 0;

	.ant-select {
		.ant-select-selector {
			border-radius: 4px;
			border: 1px solid var(--bg-slate-400);
		}
	}

	.ant-input {
		border-radius: 4px;
		border: 1px solid var(--bg-slate-400);
		max-width: 300px;
	}

	.dynamic-variable-from-text {
		font-family: 'Space Mono';
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}
}

.lightMode {
	.dynamic-variable-container {
		.ant-select {
			.ant-select-selector {
				border: 1px solid var(--bg-vanilla-300);
			}
		}

		.ant-input {
			border: 1px solid var(--bg-vanilla-300);
		}
	}
}
