@import "@Themes/constants.scss";

.root {
	.label-container {
		cursor: pointer;
		padding: 24px;
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
		border: 1px solid $grey-medium;
		background-color: transparent;

		&.active{
			padding: 16px 24px;

		}
		.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);
		}

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

			>div {
				width: 100%;
			}
		}

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