@import "@Themes/constants.scss";

.root {
	.label-container {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
		border: 1px solid var(--color-neutral-200);
		background-color: transparent;

		.placeholder {
			position: absolute;
			top: 24px;
			left: 24px;
			pointer-events: none;
			display: flex;
			align-items: center;
			transition: top 0.3s ease-in-out;
			background-color: white;
			padding: 0 4px;
			&[data-selected="true"] {
				top: -12px;
			}
		}
		.label {
			font-family: var(--font-primary);
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
			line-height: 18px;
			text-transform: uppercase;
			color: var(--color-primary-8);
			pointer-events: none;
		}

		.input-container {
			display: flex;
			outline: none;
			gap: 16px;
			border: none;
			width: 100%;

			> div {
				width: 100%;
				> div:first-of-type > div:first-of-type {
					padding: 24px;
				}
			}
		}

		&.active {
			.input-container {
				> div > div > div {
					padding: 24px 16px 16px 16px !important;
				}
			}
		}

		.is-active-placeholder {
			position: absolute;
			top: -11px;
			left: 8px;
			background-color: #ffffff;
			z-index: 1;
			padding: 0 16px;
		}

		&[data-is-errored="true"] {
			.input {
				border: 1px solid var(--color-error-600);
				~ .fake-placeholder {
					color: var(--color-error-600);
				}
			}
		}
	}
}