@import "@Themes/constants.scss";

.root {
	position: relative;

	&[data-is-disabled="true"] {
		opacity: var(--opacity-disabled, 0.3);
		.input-container {
			cursor: not-allowed;
			border: 1px solid var(--input-main-border-default, #d7dce0);
			&::placeholder {
				background: var(--input-background, #fff);
			}

			&:hover {
				border: 1px solid var(--input-main-border-default, #d7dce0);
			}

			.input {
				cursor: not-allowed;
			}
		}
	}

	.label {
		padding: 0px var(--spacing-2, 16px);
	}

	.input-container {
		display: flex;
		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
		align-items: center;
		gap: var(--spacing-2, 16px);

		border-radius: var(--input-radius, 0px);
		border: 1px solid var(--input-main-border-default, #d7dce0);
		background: var(--input-background, #fff);

		&:hover {
			border: 1px solid var(--input-main-border-hovered, #b4bec5);
		}

		&:not([data-value=""]) {
			border: 1px solid var(--input-main-border-filled, #6d7e8a);
			.input {
				font-weight: var(--font-text-weight-semibold, 600);
			}
		}

		&[data-is-errored="true"] {
			border: 1px solid var(--input-error, #dc2625);
		}

		&:focus,
		&:focus-within,
		&:focus-visible {
			border: 1px solid var(--input-main-border-focused, #005bcb);
			.input {
				font-weight: var(--font-text-weight-semibold, 600);
			}
		}

		.input {
			display: flex;
			padding: 0px var(--spacing-2, 16px);

			align-items: center;
			gap: 8px;

			flex: 1 0 0;
			border: none;

			&::placeholder {
				color: var(--input-placeholder-empty, #6d7e8a);
				/* text/md/regular */
				font-family: var(--font-text-family, Poppins);
				font-size: 16px;
				font-style: normal;
				font-weight: var(--font-text-weight-regular, 400);
				line-height: normal;
				letter-spacing: 0.08px;
			}

			&[type="number"] {
				&::-webkit-inner-spin-button,
				&::-webkit-outer-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}

				/* For Chrome, Safari, and Opera */
				&::-webkit-inner-spin-button,
				&::-webkit-outer-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}

				/* For IE 10+ */
				&::-ms-inner-spin-button,
				&::-ms-outer-spin-button {
					display: none;
				}
			}
		}
	}

	.copy-icon {
		cursor: pointer;
		height: 24px;
		width: 24px;
	}

	.errors-container {
		margin-top: 8px;
	}
}