@import "var";

.@{prefixName}-form-item {
	position: relative;
	display: flex;
	width: 100%;
	line-height: 1.5;
	background-color: @form-item-background-color !important;
	padding: @form-item-padding !important;
	box-sizing: border-box;
	
	&--vertical {
		flex-direction: column;

		.@{prefixName}-form-item {
			&__label {
				font-size: @form-item-vertical-label-text-size;
				color: @form-item-vertical-label-text-color;
			}

			&__value {
				position: relative;
				padding-right: 24px;
				margin-left: 0 !important;
			}

			&__controls {
				margin-top: @form-item-vertical-controls-margin-top;
			}
		}
	}

	&__label {
		font-size: @form-item-label-text-size !important;
		color: @form-item-label-text-color !important;
	}

	&__controls {
		display: flex;
		align-items: center;

		&.is-customized {
			display: block;
			align-items: stretch;
			text-align: left;
		}

		&-input, 
		&-textarea {
			font-size: @form-item-value-text-size !important;
			color: @form-item-value-text-color !important;
			padding: 0 !important;

			&--select {
				font-size: @form-item-value-text-size !important;
				color: @form-item-value-text-color !important;
				padding: 0 !important;
			}

			&.is-disabled {
				color: @form-item-value-disabled-text-color !important;
				background-color: inherit !important;
			}
		}

		&-input {
			height: auto;

			&--select {
				&-item {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		&-textarea {
			&--select {
				line-height: 1.5;
				
				&-item {
					line-height: 1.5;
					overflow: initial;
					white-space: initial;
					text-overflow: initial;
				}
			}
		}

		&-item {
			background-color: inherit !important;
		}
	}

	&__input {
		position: relative;
		display: block;
		width: 100%;
		min-height: 0;
		height: auto;
		background-color: inherit;
		text-align: left;
		text-overflow: clip;
		overflow: hidden;
		white-space: nowrap;
	}
	
	&__textarea, 
	&__select {
		position: relative;
		display: block;
		width: 100%;
		text-align: left;
	}

	&__extra {
		flex-shrink: 0;
		padding-left: 10px;
	}

	&__extra:empty {
		display: none;
	}

	&__verification-code {
		font-size: @form-item-verification-code-text-size;
		color: @form-item-verification-code-text-color;

		&.is-disabled {
			color: @form-item-verification-code-disabled-text-color;
			pointer-events: none;
		}
	}

	&__helper-text, 
	&__invalid-text {
		font-size: @form-item-assistive-text-size;
		line-height: 1.5;
		margin-top: @form-item-assistive-text-margin-top;
		text-align: left;
	}

	&__helper-text {
		color: @form-item-helper-text-color;
	}

	&__invalid-text {
		color: @form-item-invalid-text-color;
	}
}