@import "variables";

/**
 * Creates shared ui for input-like and select-like form elements
 */

 .createFormElement(@name: ".FormInput", @withSizes: true) {
	display: inline-block;
	margin-bottom: @primaryMargin;

	& when (@withSizes = true) {
		.@{name}-control-input {
			line-height: @elementLineHeight;
		}
	}
	
	.@{name}--central {
		.@{name}-control-input {
			text-align: center;
		}
	}

	.@{name}-errors {
		border-top: 2px solid @negativeSemanticColor;
		background-color: @negativeSemanticColor--xlight;
		display: block;
		width: 100%;
		padding: @primaryPadding--sm;
		font-size: @primaryFontSize--xs;
		z-index: 1;
		margin-top: -1px;
		text-align: left;
	}

	&.@{name}--grid {
		display: block;
	}
	
	&.@{name}--block {
		display: block;
		
		.@{name}-control {
			width: 100%;
		}

		.@{name}-control-input {
			width: 100%;
		}
	}

	& when (@withSizes = true) {
		&.@{name}--xs {
			._createFormElementLineHeight(@name, @elementLineHeight--xs);
		}

		&.@{name}--sm {
			._createFormElementLineHeight(@name, @elementLineHeight--sm);
		}

		&.@{name}--lg, &.@{name}--big {
			._createFormElementLineHeight(@name, @elementLineHeight--lg);
		}

		&.@{name}--xl {
			._createFormElementLineHeight(@name, @elementLineHeight--xl);
		}
	}

	&.@{name}--movable {
		position: relative;
		margin-top: @primaryMargin--lg;
		margin-bottom: @primaryMargin--lg;

		.@{name}-label {
			position: absolute;
			top: -18px;
			left: 0;
			font-size: @primaryFontSize--xs;
			line-height: @primaryFontSize--xs;
			opacity: 1;
			transition-property: top, font-size, opacity;
			transition-duration: .3s;
			transition-timing-function: @primaryAnimationCurve;
		}

		&.is-empty {
			.@{name}-label {
				opacity: 0;
				top: 6px;

				.FormLabel-label {
					font-size: @primaryFontSize;
				}
			}
		}

		.@{name}-errors {
			position: absolute;
			top: 100%;
			left: 0;
			padding-top: 9px;
			z-index: 1;
		}

		.@{name}-label {
			left: 10px;
		}
	}

	&.is-invalid {
		.@{name}-label {
			.FormLabel-label {
				color: @negativeSemanticColor;
			}
		}
	}

	&.is-required {
		.Form--highlightRequired & {
			.@{name}-label {
				.FormLabel-label {
					&:after {
						content: ' *';
					}
				}
			}
		}
	}

	&.is-active, &.is-active.is-invalid {
		&.@{name}--movable {
			.@{name}-label {
				.FormLabel-label {
					color: @primaryActionColor;
				}
			}
		}
	}
}

._createFormElementLineHeight(@name, @lineHeight) {
	.@{name}-control-input {
		line-height: @lineHeight - 2px;
	}
}

