/* stylelint-disable max-nesting-depth */

//
// Forms
//
// - Form Control (input, select, etc)
// - Input Groups
// - Form groups (label & input pairs)
// - Form row
// -------------------------------------------------------------
@import '../variables/colors.less';
@import '../variables/effects.less';
@import '../variables/forms.less';
@import '../variables/typography.less';

// Form Control (input, select, etc)
// ----------------------------------------------
.o-form-control {
	background-color: #fff;
	background-image: none;
	border: @form-input-border-width solid @color-gray-x-light;
	border-radius: @form-input-border-radius;
	color: @color-gray-x-dark;
	display: block;
	font-size: @font-size-base;
	height: @form-input-height;
	line-height: @font-line-height-base;
	padding: 5px 12px;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.3s;
	width: 100%;

	&[disabled] {
		background-color: @color-gray-xxx-light;
		color: @color-ui-theme-text-disabled;
		cursor: not-allowed;
		opacity: 1;
	}

	&.o-form-control--large {
		border-radius: 6px;
		font-size: 18px;
		height: 46px;
		line-height: 1.3333333;
		padding: 10px 16px;
	}

	/**
	 * Focused border is primary color, with added thickness via box-shadow.
	 * This avoids changing the height.
	 */
	&:focus {
		border: @form-input-border-width solid @color-mfly-primary;
		box-shadow: @input-focus-box-shadow;
		outline: 0;
	}
}

textarea.o-form-control {
	height: auto;
	resize: vertical;
}

// Form group
// (a label and input, with the label on top)
// ----------------------------------------------
.o-form-group {
	margin-bottom: @form-group-margin-bottom;
	position: relative;

	// TODO: Remove this backwards compat code once labels all have the o-form-label
	// class in Airship and Viewer.
	label:first-child {
		display: block;

		&.is-dark-theme {
			color: #fff;
		}
	}
}

// Labels
// ----------------------------------------------
// TODO: Remove this backwards compat code once labels all have the
// o-form-label class in Airship and Viewer.
label {
	color: @color-gray-x-dark;
	font-weight: @font-weight-medium;
	margin-bottom: 3px;

	&.is-disabled {
		color: @color-gray-x-light;
	}

	&.is-dark-theme {
		color: #fff;
	}
}

// Form row (wrapper for visual row of form controls)
// ---------------------------------------------------
.o-form-row {
	margin-bottom: 15px;

	&::before {
		content: ' ';
		display: table;
	}

	&::after {
		clear: both;
		content: ' ';
		display: table;
	}

	// offset the built-in column padding
	&.has-columns {
		margin-left: -15px;
		margin-right: -15px;
	}
}

/**
 * Validation highlighting
 * --------------------------------------------------
 */
@color-dirty-control: @color-warning;

form.o-form .o-form-control.ng-dirty,
ng-form.o-form .o-form-control.ng-dirty {
	border: 1px solid @color-dirty-control;
}

form.o-form .o-form-control.ng-dirty:focus,
ng-form.o-form .o-form-control.ng-dirty:focus {
	border: 1px solid @color-dirty-control;
	box-shadow: @input-dirty-focus-box-shadow;
}

/* Invalid but pristine fields shouldn't be red until the user interacts with them. */
form.o-form .o-form-control.ng-invalid:not(.ng-pristine),
ng-form.o-form .o-form-control.ng-invalid:not(.ng-pristine) {
	border: 1px solid @color-danger;

	&:focus {
		box-shadow: @input-invalid-focus-box-shadow;
	}
}

// validation text labels
.o-text-validation {
	position: absolute;
	right: 15px;

	&.o-text-validation--warning {
		color: @color-danger;
	}

	&.o-text-validation--valid {
		color: @color-success;
	}

	// Positioning special cases
	.o-form-group & {
		right: 0;
	}
}

// o-form--no-highlight (reset)
// Form controls will turn green, red when dirty, invalid. The no-highlight
// class removes this highlighting when inline feeback is not desired (example: login form)
// -------------------------------------------------------------
form.o-form--no-highlight .form-control:focus,
form.o-form--no-highlight .o-form-control:focus,
form.o-form--no-highlight .form-control.ng-invalid,
form.o-form--no-highlight .o-form-control.ng-invalid,
form.o-form--no-highlight .form-control.ng-dirty,
form.o-form--no-highlight .o-form-control.ng-dirty,
form.o-form--no-highlight .datepicker-wrapper input.form-control.ng-dirty,
form.o-form--no-highlight .datepicker-wrapper input.form-control.ng-dirty ~ span.input-group-btn > .btn-input-white,
form.o-form--no-dirty-highlight .form-control.ng-dirty,
form.o-form--no-dirty-highlight .o-form-control.ng-dirty,
form.o-form--no-dirty-highlight .datepicker-wrapper input.form-control.ng-dirty,
form.o-form--no-dirty-highlight .datepicker-wrapper input.form-control.ng-dirty ~ span.input-group-btn > .btn-input-white,
ng-form.o-form--no-highlight .form-control:focus,
ng-form.o-form--no-highlight .o-form-control:focus,
ng-form.o-form--no-highlight .form-control.ng-invalid,
ng-form.o-form--no-highlight .o-form-control.ng-invalid,
ng-form.o-form--no-highlight .form-control.ng-dirty,
ng-form.o-form--no-highlight .o-form-control.ng-dirty,
ng-form.o-form--no-highlight .datepicker-wrapper input.form-control.ng-dirty,
ng-form.o-form--no-highlight .datepicker-wrapper input.form-control.ng-dirty ~ span.input-group-btn > .btn-input-white,
ng-form.o-form--no-dirty-highlight .form-control.ng-dirty,
ng-form.o-form--no-dirty-highlight .o-form-control.ng-dirty,
ng-form.o-form--no-dirty-highlight .datepicker-wrapper input.form-control.ng-dirty,
ng-form.o-form--no-dirty-highlight .datepicker-wrapper input.form-control.ng-dirty ~ span.input-group-btn > .btn-input-white {
	border: solid 1px @color-gray-x-light;

	&:focus {
		box-shadow: none;
	}
}

/* stylelint-enable max-nesting-depth */