[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;
	}
}

fieldset {
	word-wrap: break-word;

	@-moz-document url-prefix() { // FF Fieldset workaround
		display: table-cell;
	}
}

label {
	color: $input-label-color;
	font-size: $input-label-font-size;
	font-weight: $input-label-font-weight;
	margin-bottom: $input-label-margin-bottom;
	max-width: 100%;
	word-wrap: break-word;

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

	&.focus {
		color: $input-label-focus-color;
	}

	&[for] {
		cursor: $input-label-for-cursor;
	}

	+ .form-text {
		margin-bottom: $input-label-margin-bottom;
		margin-top: 0;
	}

	.reference-mark {
		color: $input-label-reference-mark-color;
		font-size: $input-label-reference-mark-font-size;
		margin-left: $input-label-reference-mark-spacer;
		margin-right: $input-label-reference-mark-spacer;
		vertical-align: $input-label-reference-mark-vertical-align;
	}
}

// Label without for attribute

.form-control-label {
	display: inline;
	margin-bottom: 0;
}

.form-control-label-text {
	cursor: $input-label-for-cursor;
	display: inline-block;
	margin-bottom: $input-label-margin-bottom;
	max-width: 100%;
	word-wrap: break-word;
}

// Inputs

.form-control {
	background-clip: border-box;
	border-color: $input-border-color;
	border-style: $input-border-style;
	border-bottom-width: $input-border-bottom-width;
	border-left-width: $input-border-left-width;
	border-right-width: $input-border-right-width;
	border-top-width: $input-border-top-width;

	@if not ($input-font-size == $font-size-base) {
		font-size: $input-font-size;
	}

	height: $input-height;
	min-width: 0;

	@if not ($input-padding-y == $btn-padding-y) {
		padding-bottom: $input-padding-y;
		padding-top: $input-padding-y;
	}

	@if not ($input-padding-x == $btn-padding-x) {
		padding-left: $input-padding-x;
		padding-right: $input-padding-x;
	}

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

	&:focus {
		&::placeholder {
			color: $input-placeholder-focus-color;
		}
	}

	&.focus {
		@include clay-form-control-focus();
	}

	&.disabled {
		background-color: $input-disabled-bg;
		border-color: $input-disabled-border-color;
		color: $input-disabled-color;
		cursor: $input-disabled-cursor;
		opacity: $input-disabled-opacity;
	}

	&[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;
			transition: $input-transition;
		}
	}

	&:not([type="range"]) {
		@media screen and (-webkit-min-device-pixel-ratio: 0) {
			-webkit-appearance: none;
		}
	}

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

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

.form-control-plaintext {
	background-clip: border-box;
	border-bottom-width: $input-border-bottom-width;
	border-left-width: $input-border-left-width;
	border-right-width: $input-border-right-width;
	border-top-width: $input-border-top-width;

	@if not ($input-font-size == $font-size-base) {
		font-size: $input-font-size;
	}

	height: $input-height;
	min-width: 0;

	@if not ($input-padding-y == $btn-padding-y) {
		padding-bottom: $input-padding-y;
		padding-top: $input-padding-y;
	}

	text-overflow: ellipsis;

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

.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-container($form-control-tag-group);

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

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

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

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

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

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

.form-control-inset {
	background-color: transparent;
	border-width: 0;
	color: $input-color;
	flex-grow: 1;
	margin-bottom: $form-control-inset-margin-y;
	margin-top: $form-control-inset-margin-y;
	min-height: $form-control-inset-min-height;
	padding: 0;

	&:focus {
		outline: 0;
	}

	&:disabled {
		background-color: $input-disabled-bg;
		border-color: $input-disabled-border-color;
		color: $input-disabled-color;
		cursor: $input-disabled-cursor;
		opacity: $input-disabled-opacity;
	}
}

// Select

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

select.form-control {
	cursor: $input-select-cursor;

	option {
		cursor: $input-select-cursor;
	}
}

// Will need to be revisted if action is taken on https://github.com/twbs/bootstrap/issues/23058
select.form-control:not([multiple]):not([size]),
.form-control-select {
	-moz-appearance: none;
	-webkit-appearance: none;

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

	background-color: $input-select-bg;
	background-image: $input-select-icon;
	background-position: $input-select-bg-position;
	background-repeat: no-repeat;
	background-size: $input-select-bg-size;
	padding-bottom: $input-select-padding-bottom;
	padding-left: $input-select-padding-left;
	padding-right: $input-select-padding-right;
	padding-top: $input-select-padding-top;

	&:focus {
		background-color: $input-select-focus-bg;
		background-image: $input-select-icon-focus;
	}

	&:disabled {
		background-image: $input-select-icon-disabled;
	}
}

// Textarea

textarea.form-control,
textarea.form-control-plaintext,
.form-control.form-control-textarea {
	height: $input-textarea-height;
}

// File

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

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

// Checkbox and Radio

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

.form-check-input {
	position: static;

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

		+ .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;
}

// Disabled State

fieldset[disabled] label,
label.disabled {
	color: $input-label-disabled-color;
	cursor: $input-label-disabled-cursor;
	opacity: $input-disabled-opacity;
}

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

.form-control {
	fieldset[disabled] &,
	&[disabled] {
		border-color: $input-disabled-border-color;
		color: $input-disabled-color;
		cursor: $input-disabled-cursor;
		opacity: $input-disabled-opacity;

		&::placeholder {
			color: $input-placeholder-disabled-color;
		}
	}
}

.form-control[disabled] > option {
	@media (-webkit-min-device-pixel-ratio: 0) { // Webkit only
		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 border-radius($input-border-radius-lg);

	font-size: $input-font-size-lg;
	height: $input-height-lg;
	padding-bottom: $input-padding-y-lg;
	padding-left: $input-padding-x-lg;
	padding-right: $input-padding-x-lg;
	padding-top: $input-padding-y-lg;

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

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

%clay-select-form-control-lg {
	&:not([size]):not([multiple]) {
		height: $input-height-lg;

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

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

textarea.form-control-lg,
.form-control-lg.form-control-textarea {
	height: $input-textarea-height-lg;
}

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

%clay-form-control-sm {
	@include border-radius($input-border-radius-sm);

	font-size: $input-font-size-sm;
	height: $input-height-sm;
	padding-bottom: $input-padding-y-sm;
	padding-left: $input-padding-x-sm;
	padding-right: $input-padding-x-sm;
	padding-top: $input-padding-y-sm;

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

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

%clay-select-form-control-sm {
	&:not([size]):not([multiple]) {
		height: $input-height-sm;

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

%clay-textarea-form-control-sm {
	height: $input-textarea-height-sm;
}

textarea.form-control-sm,
.form-control-sm.form-control-textarea {
	height: $input-textarea-height-sm;
}

// 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 / 2;
		}
	}

	.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;
	}

	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;
		}
	}
}