.input-with-label {
	display: flex;
	flex-direction: row;

	border-radius: 2px 0px 0px 2px;

	.label {
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 18px; /* 128.571% */
		letter-spacing: 0.56px;

		max-width: 150px;
		min-width: 60px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		padding: 0px 8px;

		border-radius: 2px 0px 0px 2px;
		border: 1px solid var(--l2-border);
		background: var(--l2-background);
		color: var(--l2-foreground);

		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-weight: var(--font-weight-light);
	}

	.input {
		flex: 1;
		min-width: 150px;
		font-family: 'Space Mono', monospace !important;

		border-radius: 2px 0px 0px 2px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);

		border-right: none;
		border-left: none;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		font-size: 12px !important;
		line-height: 27px;

		&::placeholder {
			color: var(--l2-foreground) !important;
			font-size: 12px !important;
		}
		&[type='number']::-webkit-inner-spin-button,
		&[type='number']::-webkit-outer-spin-button {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			margin: 0;
		}
	}

	.close-btn {
		border-radius: 0px 2px 2px 0px;
		border: 1px solid var(--l2-border);
		background: var(--l2-background);
		height: 38px;
		width: 38px;
	}

	&.labelAfter {
		.input {
			border-radius: 0px 2px 2px 0px;
			border: 1px solid var(--l1-border);
			background: var(--l2-background);
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}

		.label {
			border-left: none;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
	}
}
