[type='checkbox'] {
	cursor: $form-check-input-cursor;
	height: 14px;
	width: 14px;

	&:disabled {
		cursor: $form-check-input-disabled-cursor;
	}
}

[type='radio'] {
	cursor: $form-check-input-cursor;
	height: 15px;
	width: 14px;

	&:disabled {
		cursor: $form-check-input-disabled-cursor;
	}
}

label {
	@include clay-css($input-label);

	@include clay-scale-component {
		@include clay-css(map-get($input-label, mobile));
	}

	&.focus {
		@include clay-css(map-get($input-label, focus));
	}

	&[for] {
		@include clay-css(map-get($input-label, for));
	}

	$_form-feedback-group: map-get($input-label, '+ .form-feedback-group');

	@if ($_form-feedback-group) {
		+ .form-feedback-group {
			@include clay-css($_form-feedback-group);
		}
	}

	+ .form-text {
		@include clay-css(map-get($input-label, form-text));
	}

	$_form-help-text: map-get($input-label, form-help-text);

	@if ($_form-help-text) {
		.form-help-text {
			@include clay-css($_form-help-text);
		}
	}

	.reference-mark {
		@include clay-css(map-get($input-label, reference-mark));
	}
}

// Label without for attribute

.form-control-label {
	@include clay-css($form-control-label);
}

.form-control-label-text {
	@include clay-css($form-control-label-text);
}

// Label Disabled

fieldset[disabled] label,
label.disabled {
	@include clay-css(map-get($input-label, disabled));
}

fieldset[disabled] label {
	.form-control {
		font-weight: normal;
		opacity: 1;
	}
}

// Inputs

.form-control {
	@include clay-form-control-variant($input);

	@include clay-scale-component {
		@include clay-css(map-get($input, mobile));
	}

	// Removes inner shadow on inputs in iOS. Bootstrap 4 uses
	// `background-clip: padding-box` to remove it but causes 1px clipping issue
	// in Chrome in connected input-groups when background on input is any other
	// color than white. This also unstyles the `select.form-control` element.

	&:not([type='range']) {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}

	// IE10+
	// `::-ms-clear` disable clear button at the edge of an `<input type="text">`
	// `::-ms-reveal` disable password reveal button on `<input type="password">`

	&::-ms-clear,
	&::-ms-reveal {
		display: none;
		height: 0;
		width: 0;
	}

	// CKEditor markup work around

	&[contenteditable] p {
		margin-bottom: 0;
	}

	.label {
		@include clay-label-variant($form-control-label-size);
	}
}

// This adds disabled styles to div.form-control inside a disabled fielset.

fieldset[disabled] {
	select.form-control[multiple],
	.form-control {
		@include clay-css(map-get($input, disabled));
	}
}

// Readonly controls as plain text
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)

.form-control-plaintext {
	@include clay-form-control-variant($input-plaintext);

	@include clay-scale-component {
		font-size: $input-font-size-mobile;
		height: $input-height-mobile;
	}

	&.form-control-sm,
	&.form-control-lg {
		padding-left: 0;
		padding-right: 0;
	}
}

.form-control-hidden {
	left: 0;
	opacity: 0;
	position: absolute;
	z-index: -1;
}

div {
	&.form-control {
		height: auto;
		min-height: $input-height;
	}

	&.form-control-lg {
		min-height: $input-height-lg;
	}

	&.form-control-sm {
		min-height: $input-height-sm;
	}
}

.form-control-tag-group {
	@include clay-css($form-control-tag-group);

	.autofit-row {
		@include clay-css($form-control-tag-group-autofit-row);
	}

	.autofit-col {
		@include clay-css($form-control-tag-group-autofit-col);

		.form-control-inset {
			width: auto;
		}
	}

	.input-group-item {
		@include clay-css($form-control-tag-group-input-group-item);
	}

	.inline-item {
		@include clay-css($form-control-tag-group-inline-item);
	}

	.btn {
		@include clay-button-variant($form-control-tag-group-btn);
	}

	.btn-monospaced {
		@include clay-button-variant($form-control-tag-group-btn-monospaced);
	}

	.component-action {
		@include clay-link($form-control-tag-group-component-action);
	}
}

.form-control-inset {
	@include clay-form-control-variant($form-control-inset);

	// IE10+
	// `::-ms-clear` disable clear button at the edge of an `<input type="text">`
	// `::-ms-reveal` disable password reveal button on `<input type="password">`

	&::-ms-clear,
	&::-ms-reveal {
		display: none;
		height: 0;
		width: 0;
	}
}

// Select

select.form-control {
	@include clay-select-variant($input-select);

	// Unstyle the caret on `<select>`s in IE11.

	&::-ms-expand {
		display: none;
	}

	// Remove dotted outline from select box in FF

	&:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 $input-color;
	}

	// Suppress the nested default white text on blue background highlight given to
	// the selected option text when the (still closed) <select> receives focus
	// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
	// match the appearance of the native widget.
	// See https://github.com/twbs/bootstrap/issues/19398.

	&:focus::-ms-value {
		background-color: transparent;
		color: inherit;
	}
}

.form-control-select {
	@include clay-css($form-control-select);

	&:hover {
		@include clay-css(map-get($form-control-select, hover));
	}

	&:focus {
		@include clay-css(map-get($form-control-select, focus));
	}
}

select.form-control[size] {
	@include clay-select-variant($input-select-size);
}

select.form-control[multiple] {
	@include clay-select-variant($input-select-multiple);
}

// Form Control Variants

@each $key, $value in $input-palette {
	@if not clay-is-map-unset($value) {
		$selector: if(
			starts-with($key, '.') or starts-with($key, '#'),
			$key,
			str-insert($key, '.', 1)
		);

		#{$selector} {
			@include clay-form-control-variant($value);
		}
	}
}

// Form Control Select Variants

@each $key, $value in $form-control-select-palette {
	@if not clay-is-map-unset($value) {
		$selector: if(
			starts-with($key, '.') or starts-with($key, '#'),
			$key,
			str-insert($key, '.', 1)
		);

		#{$selector} {
			@include clay-select-variant($value);
		}
	}
}

// Textarea

textarea.form-control,
textarea.form-control-plaintext,
.form-control.form-control-textarea {
	@include clay-form-control-variant($input-textarea);
}

// File

.form-control-file {
	cursor: $input-file-cursor;
	display: block;
	width: 100%;

	&::-webkit-file-upload-button {
		cursor: $input-file-cursor;
	}
}

// Range

.form-control[type='range'] {
	background-color: transparent;
	border-color: transparent;
	padding: 0;

	&:focus {
		box-shadow: none;

		&::-webkit-slider-thumb {
			box-shadow: $input-focus-box-shadow;
		}
	}

	&::-webkit-slider-thumb {
		border-radius: 100px;

		@include transition($input-transition);
	}
}

.form-control-range {
	display: block;
	width: 100%;
}

// Checkbox and Radio

.form-check {
	display: block;
	padding-left: $form-check-input-gutter;
	position: relative;
}

.form-check-label {
	cursor: $form-check-label-cursor;
	display: inline;
	margin-bottom: 0;
	position: relative;
}

.form-check-input {
	margin-left: math-sign($form-check-input-gutter);
	margin-top: $form-check-input-margin-y;
	position: static;

	// Use [disabled] and :disabled for workaround
	// https://github.com/twbs/bootstrap/issues/28247

	&[disabled],
	&:disabled {
		cursor: $form-check-input-disabled-cursor;

		~ .form-check-label,
		+ .form-check-label-text {
			color: $input-label-disabled-color;
			cursor: $form-check-label-text-disabled-cursor;
		}
	}
}

.form-check-label-text {
	margin-left: $form-check-label-text-margin-left;
	padding-left: $form-check-label-text-padding-left;
}

.form-check-inline {
	align-items: center;
	display: inline-flex;

	// Override base .form-check

	margin-right: $form-check-inline-margin-x;
	padding-left: 0;

	// Undo .form-check-input defaults and add some `margin-right`.

	.form-check-input {
		margin-left: 0;
		margin-right: $form-check-inline-input-margin-x;
		margin-top: 0;
		position: static;
	}
}

// Disabled State

.form-control[disabled] > option {
	// Webkit only

	@media (-webkit-min-device-pixel-ratio: 0) {
		color: $input-disabled-color;
	}
}

.form-check.disabled .form-check-label {
	@if not($input-label-disabled-color == $text-muted) {
		color: $input-label-disabled-color;
	}
}

.form-control-file:disabled {
	cursor: $input-disabled-cursor;

	&::-webkit-file-upload-button {
		cursor: $input-disabled-cursor;
	}
}

// Readonly State

.form-control[readonly] {
	@include clay-form-control-variant($input-readonly);
}

.form-control-plaintext[readonly] {
	@include clay-form-control-variant($input-plaintext-readonly);
}

// Input Sizes

// Bootstrap 4 @extend .form-control-lg; work around

%clay-form-control-lg {
	@include clay-form-control-variant($input-lg);
}

.form-control-lg {
	@extend %clay-form-control-lg;
}

// Select Lg

%clay-select-form-control-lg {
	height: $input-height-lg;

	@include clay-scale-component {
		height: $input-height-lg-mobile;
	}
}

// Textarea Lg

%clay-textarea-form-control-lg {
	@include clay-form-control-variant($input-textarea-lg);
}

textarea.form-control-lg,
.form-control-lg.form-control-textarea {
	@extend %clay-textarea-form-control-lg !optional;
}

// Bootstrap 4 @extend .form-control-sm; work around

%clay-form-control-sm {
	@include clay-form-control-variant($input-sm);
}

.form-control-sm {
	@extend %clay-form-control-sm !optional;
}

// Select Sm

%clay-select-form-control-sm {
	@include clay-form-control-variant($form-control-select-sm);

	@include clay-scale-component {
		@include clay-css(map-get($form-control-select-sm, mobile));
	}
}

.form-control-select.form-control-sm {
	@extend %clay-select-form-control-sm !optional;
}

// Textarea Sm

%clay-textarea-form-control-sm {
	@include clay-form-control-variant($input-textarea-sm);
}

textarea.form-control-sm,
.form-control-sm.form-control-textarea {
	@extend %clay-textarea-form-control-sm !optional;
}

// .form-control-tag-group-sm

%clay-form-control-tag-group-sm {
	@include clay-form-control-variant($form-control-tag-group-sm);
}

.form-control-tag-group-sm.form-control {
	@extend %clay-form-control-tag-group-sm;
}

// Fieldset

.form-fieldset {
	@include clay-css($form-fieldset);

	&[disabled] {
		@include clay-css(map-get($form-fieldset, disabled));

		label {
			@include clay-css(map-deep-get($form-fieldset, disabled, label));

			.form-control {
				@include clay-css(
					map-deep-get($form-fieldset, disabled, label, form-control)
				);
			}
		}

		.form-control-label-text {
			@include clay-css(
				map-deep-get($form-fieldset, disabled, form-control-label-text)
			);
		}

		.form-legend {
			@include clay-css(
				map-deep-get($form-fieldset, disabled, form-legend)
			);
		}

		.form-control {
			@include clay-css(
				map-deep-get($form-fieldset, disabled, form-control)
			);
		}
	}
}

// Legend

.form-legend {
	@include clay-css($form-legend);
}

// Form groups
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
	margin-bottom: $form-group-margin-bottom;
}

@if ($enable-bs4-deprecated) {
	// For use with horizontal and inline forms, when you need the label (or legend)
	// text to align with the form controls.

	.col-form-label {
		// Override the `<legend>` default

		font-size: inherit;
		line-height: $input-line-height;

		// Override the `<label>/<legend>` default

		margin-bottom: 0;
		padding-bottom: add($input-padding-y, $input-border-bottom-width);
		padding-top: add($input-padding-y, $input-border-top-width);
	}

	.col-form-label-lg {
		font-size: $input-font-size-lg;
		line-height: $input-line-height-lg;
		padding-bottom: add($input-padding-y-lg, $input-border-bottom-width);
		padding-top: add($input-padding-y-lg, $input-border-top-width);
	}

	.col-form-label-sm {
		font-size: $input-font-size-sm;
		line-height: $input-line-height-sm;
		padding-bottom: add($input-padding-y-sm, $input-border-bottom-width);
		padding-top: add($input-padding-y-sm, $input-border-top-width);
	}

	// Form grid
	// Special replacement for our grid system's `.row` for tighter form layouts.

	.form-row {
		display: flex;
		flex-wrap: wrap;
		margin-left: math-sign($form-grid-gutter-width * 0.5);
		margin-right: math-sign($form-grid-gutter-width * 0.5);

		> .col,
		> [class*='col-'] {
			padding-left: $form-grid-gutter-width * 0.5;
			padding-right: $form-grid-gutter-width * 0.5;
		}
	}

	// Inline forms
	//
	// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
	// forms begin stacked on extra small (mobile) devices and then go inline when
	// viewports reach <768px.
	//
	// Requires wrapping inputs and labels with `.form-group` for proper display of
	// default HTML form controls and our custom form controls (e.g., input groups).

	.form-inline {
		// Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)

		align-items: center;
		display: flex;
		flex-flow: row wrap;

		// Because we use flex, the initial sizing of checkboxes is collapsed and
		// doesn't occupy the full-width (which is what we want for xs grid tier),
		// so we force that here.

		.form-check {
			width: 100%;
		}

		@include media-breakpoint-up(sm) {
			label {
				align-items: center;
				display: flex;
				justify-content: center;
				margin-bottom: 0;
			}

			// Inline-block all the things for "inline"

			.form-group {
				align-items: center;
				display: flex;
				flex: 0 0 auto;
				flex-flow: row wrap;
				margin-bottom: 0;
			}

			// Allow folks to *not* use `.form-group`

			.form-control {
				display: inline-block;
				vertical-align: middle;

				// Prevent labels from stacking above inputs in `.form-group`

				width: auto;
			}

			// Make static controls behave like regular ones
			.form-control-plaintext {
				display: inline-block;
			}

			.input-group,
			.custom-select {
				width: auto;
			}

			// Remove default margin on radios/checkboxes that were used for stacking, and
			// then undo the floating of radios and checkboxes to match.

			.form-check {
				align-items: center;
				display: flex;
				justify-content: center;
				padding-left: 0;
				width: auto;
			}
			.form-check-input {
				flex-shrink: 0;
				margin-left: 0;
				margin-right: $form-check-input-margin-x;
				margin-top: 0;
				position: relative;
			}

			.custom-control {
				align-items: center;
				justify-content: center;
			}
			.custom-control-label {
				margin-bottom: 0;
			}
		}
	}
}

// Form Group Autofit

.form-group-autofit {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	margin-bottom: $form-group-autofit-margin-bottom;

	@include media-breakpoint-up(sm) {
		flex-direction: row;
		width: 100%;
	}

	label {
		align-self: flex-start;
	}

	.form-group-item {
		display: flex;
		flex-basis: auto;
		flex-direction: column;
		flex-grow: 0;
		flex-shrink: 1;
		min-width: 25px;
		position: relative;
		width: 100%;

		&:not(:last-child) {
			margin-bottom: $form-group-margin-bottom;

			@include media-breakpoint-down(xs) {
				margin-bottom: $form-group-margin-bottom-mobile;
			}
		}
	}

	> .form-group-item:not(:last-child) {
		@include media-breakpoint-up(sm) {
			margin-bottom: 0;
			margin-right: $grid-gutter-width * 0.5;
		}
	}

	.form-group-item-shrink {
		flex-shrink: 0;
		max-width: 100%;
		width: auto;
	}
}

// Form Group Item Label

.form-group-autofit .form-group-item-label:not(:last-child) {
	@include media-breakpoint-down(xs) {
		margin-bottom: 0;
	}
}

.form-group-item-label {
	@include media-breakpoint-up(sm) {
		justify-content: center;
		min-height: $input-height;

		> label {
			margin-bottom: 0;
			max-width: $form-group-item-label-max-width;
		}
	}
}

.form-group-item-label-spacer {
	@include media-breakpoint-up(sm) {
		margin-top: $form-group-item-label-spacer;
	}
}

// Form Group

.form-group {
	position: relative;

	@include clay-scale-component {
		margin-bottom: $form-group-margin-bottom-mobile;
	}
}

.form-group-sm {
	margin-bottom: $form-group-sm-margin-bottom;

	@include clay-scale-component {
		margin-bottom: $form-group-sm-margin-bottom-mobile;
	}

	label {
		margin-bottom: $form-group-sm-input-label-margin-bottom;
	}

	.btn {
		@extend %clay-btn-sm !optional;
	}

	.form-control,
	.form-control-plaintext {
		@extend %clay-form-control-sm;
	}

	div.form-control,
	.form-control[contenteditable] {
		height: auto;
		min-height: $input-height-sm;
	}

	select.form-control {
		@extend %clay-select-form-control-sm;
	}

	select[multiple],
	.form-control[size] {
		height: auto;
	}

	textarea.form-control,
	.form-control.form-control-textarea {
		@extend %clay-textarea-form-control-sm;
	}

	.form-feedback-item ~ .form-feedback-item,
	.form-feedback-item ~ .form-text,
	.form-text ~ .form-feedback-item,
	.form-text ~ .form-text {
		margin-top: 0;
	}

	.form-group-item-label {
		@include media-breakpoint-up(sm) {
			min-height: $input-height-sm;

			> label {
				margin-bottom: 0;
			}
		}
	}

	.form-group-item-label-spacer {
		@include media-breakpoint-up(sm) {
			margin-top: $form-group-sm-item-label-spacer;
		}
	}
}