@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;
			height: 94px;
			&::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;
			}

			color: var(--input-placeholder-filled, #24282e);
			/* text/md/semibold */
			font-family: var(--font-text-family, Poppins);
			font-size: 16px;
			font-style: normal;
			font-weight: var(--font-text-weight-semibold, 600);
			line-height: normal;
			letter-spacing: 0.08px;
		}
	}
}