@import "@Themes/constants.scss";

.root {
	border-radius: var(--input-radius, 0px);
	border: 1px solid var(--input-main-border-filled, #6d7e8a);
	background: var(--input-background, #fff);

	svg {
		stroke: var(--button-icon-button-default-default);
	}

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

	&[data-has-value="true"] {
		border-radius: var(--input-radius, 0px);
		border: 1px solid var(--input-main-border-filled, #6d7e8a);
		background: var(--input-background, #fff);
	}

	&[data-is-focused="true"] {
		border-radius: var(--input-radius, 0px);
		border: 1px solid var(--input-main-border-focused, #005bcb);
		background: var(--input-background, #fff);
	}

	&[data-is-disabled="true"] {
		opacity: var(--opacity-disabled, 0.3);
		pointer-events: none;
	}

	.content {
		display: flex;
		align-items: center;
		align-content: center;
		gap: 16px var(--spacing-2, 16px);
		flex-wrap: wrap;

		min-height: 56px;

		padding: var(--spacing-1-5, 12px) var(--spacing-sm, 8px);

		.input {
			flex: 1;
			border: none;

			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;
			width: 100%;

			&::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;
			}
		}
	}
}