@import './src/Components/GlobalStyles/colors';
@import './src/Components/GlobalStyles/mixins';

.inputElementContainer {
	display: flex;
	flex-direction: column;
	//width: auto;
	margin-bottom: 14px;
	// margin: 17px auto;
	white-space: nowrap;

	label {
		margin: 0 0 5px;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		color: $font-grey-darker;
	}

	input {
		padding: 24px 27px;
		height: 32px;
		border-radius: 10px;
		font-size: 16px;
		outline: none;
		border: none;
		box-shadow: 0 3px 13px 0 $dropShadow;

		&::placeholder {
			color: $font-light-grey;
		}
	}
}

.inline {
	.inputElementContainer {
		width: auto;
		flex-direction: unset;

		label {
			align-self: center;
			text-align: start;
			min-width: 25%;
			font-weight: 600;
		}

		input {
			width: fill-available;
		}
	}
}

.dropdown {
	display: flex;
	flex-direction: column;
	gap: 20px;

	div {
		border-radius: 10px;
		outline: none;
		height: 48px;
		min-width: 205px;
		width: fill-available;
	}

	label {
		//margin: 0 0 5px;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		color: $font-grey-darker;
	}
}

.inline.dropdown {
	width: auto;
	flex-direction: unset;

	label {
		align-self: center;
		text-align: start;
		padding-right: 15px;
		min-width: 25%;
		font-weight: 600;
	}

	.input {
		width: available;
	}
}

.buttonContainer {
	display: flex;
	width: auto;
	margin-top: 50px;
	justify-content: end;
	gap: 20px;

	.submitButton,
	.cancelButton {
		@include Button;

		color: white;
		padding: 10px 20px;
		min-width: 150px;
	}

	.submitButton {
		background-color: var(--primary-color);
	}

	.cancelButton {
		background-color: $font-grey;
	}
}

.nameInput {
	margin-left: 20px;
}