@import (reference) "global";

@fields-elements: 12;
@fields-default-spacing: 0.75rem;
@align-fields-to-grid: false;
@spacing: @fields-default-spacing;

.ui.input > input {
	box-sizing: border-box;
}

.base-fields() {
	display: block;
	padding: 0;
	.clearfix();
	> field {
		display: block;
		float: left;
		height: auto;
		box-sizing: border-box;
	}
}

.base-fields(@include-spacing:true) when (@include-spacing = true) {
	> field {
		padding: 0 (@fields-default-spacing/2) @fields-default-spacing;
	}
}

.base-fields() when (@align-fields-to-grid = true) {
	margin: 0 (-@fields-default-spacing/2);
}

.base-fields() when (@align-fields-to-grid = false) {
	margin: 0;
}

.per-col-span-content(@row) {
	.mixin-loop (@i) when (@i<=@row) {
		> field.cols-@{i} {
			width: 100%/@row * @i;
		}
		.mixin-loop(@i+1);
	}
	.mixin-loop(2);
}

.per-col-span() {
	.mixin-loop (@x) when (@x<=@fields-elements) {
		> fields.cols-@{x} {
			.per-col-span-content(@x);
		}
		.mixin-loop(@x+1);
	}
	.mixin-loop(2);
}

.per-row(@row,@spacing:@fields-default-spacing,@include-spacing:true) {
	> field {
		width: 100%/@row;

		&:nth-of-type(1n) {
			clear: none;
		}

		&:nth-of-type(@{row}n+1) {
			clear: both;
		}
	}
}

.per-row(@row,@spacing:@fields-default-spacing,@include-spacing:true) when (@include-spacing=true) {
	> field {
		padding: 0 (@spacing/2) @spacing;
	}
}

.fields-html-classes(@include-spacing) {
	.mixin-loop (@i) when (@i<=@fields-elements) {
		fields.cols-@{i} {
			.per-row(@i, @fields-default-spacing, @include-spacing);
		}
		.mixin-loop(@i+1);
	}
	.mixin-loop(2);
	.per-col-span();

}

.form-field() {
	> field {
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		box-sizing: border-box;

		> label {
			padding-right: 1em;
			width: 6em;
			min-width: 6em;
			text-align: right;
			display: block;
		}

		&.required {
			> label {
				position: relative;

				&:after {
					content: '*';
					color: #DB2828;
					position: absolute;
					right: 0em;
					line-height: 1rem;
					top: 50%;
					margin-top: -0.5rem;
					width: 1rem;
					text-align: center;
				}
			}
		}

		.ui.input, .ui.textarea, > .content, > content {
			-webkit-box-flex: 1;
			-webkit-flex: 1 0 auto;
			-ms-flex: 1 0 auto;
			flex: 1 0 auto;
			width: auto;
		}

		.ui.tag-editor {
			-webkit-box-flex: 1;
			-webkit-flex: 1 0 auto;
			-ms-flex: 1 0 auto;
			flex: 1 0 auto;
			width: ~'calc(100% - 8em)';
		}

		> .ui.textarea {
			width: auto;
		}

		> message {
			.box-shadow(none) !important;
			background: transparent !important;
		}
	}
}

.hide-state {
	field.required {
		> label {
			&:after {
				display: none !important;
			}
		}
	}

	message.warn, messages.warn,
	message.error, messages.error {
		display: none !important;
	}
}

.form, form-layout {
	position: relative;
	padding-top: 0.75rem;

	> fields > field {
		width: 100%;
		box-sizing: border-box;
	}

	> fields {
		.base-fields();

	}

	> field {
		box-sizing: border-box;
		width: 100%;
		padding: 0 (@fields-default-spacing/2) @fields-default-spacing;
	}

	> fields, > [class*="fields-"] {
		.form-field();
	}

	.form-field();
	.fields-html-classes(false);
}

.vertial-form-field() {
	> field {
		display: block;
		box-sizing: border-box;

		> label {
			display: block;
			text-align: left;
			margin-bottom: 4px;
		}

		> .ui.input, .ui.textarea, > .content, > content {
			display: block;
			width: auto;
		}
	}
}

.form, form-layout {
	&.vertical {
		> fields, > [class*="fields-"] {
			.vertial-form-field();
		}
	}
}


fields, [class*="fields-"] {
	&.vertical {
		.vertial-form-field();
	}
}

form-layout {
	display: block;
}

.small-form-field() {
	> field {
		box-sizing: border-box;

		> label {
			display: block;
		}

		> .ui.input, .ui.textarea, > .content, > content {
			-webkit-box-flex: 1;
			-webkit-flex: 1 0 auto;
			-ms-flex: 1 0 auto;
			flex: 1 0 auto;
			width: auto;
		}

		width: 100% !important;
	}
}

@media @small-only {
	.form, form-layout {
		> fields, > [class*="fields-"] {
			.small-form-field();
		}

		.small-form-field();
	}
}

//@import "form-extend.less";
@import "form-message.less";
