$input-bg: var(--input-background-color, $gray-200) !default;

$input-border-color: var(--input-border-color, $gray-300) !default;
$input-border-style: var(--input-border-style, solid) !default;
$input-border-width: 1px !default;

$input-border-bottom-width: var(
	--input-border-bottom-width,
	$input-border-width
) !default;
$input-border-left-width: var(
	--input-border-left-width,
	$input-border-width
) !default;
$input-border-right-width: var(
	--input-border-right-width,
	$input-border-width
) !default;
$input-border-top-width: var(
	--input-border-top-width,
	$input-border-width
) !default;

$input-border-radius: var(--input-border-radius, $border-radius) !default;
$input-box-shadow: var(--input-box-shadow, none) !default;
$input-color: var(--input-color, $gray-900) !default;
$input-font-family: var(--input-font-family, $input-btn-font-family) !default;
$input-font-size: var(--input-font-size, $input-btn-font-size) !default;
$input-font-weight: var(--input-font-weight, $font-weight-base) !default;
$input-height: var(--input-height, 40px) !default;
$input-line-height: var(--input-line-height, $input-btn-line-height) !default;
$input-padding-x: var(--input-padding-x, 16px) !default;
$input-padding-y: var(--input-padding-y, 7px) !default;
$input-transition:
	border-color 0.15s ease-in-out,
	box-shadow 0.15s ease-in-out !default;

$input-font-size-mobile: 16px !default;
$input-height-mobile: null !default;

// Input Focus

$input-focus-bg: var(--input-focus-background-color, $primary-l3) !default;
$input-focus-border-color: var(
	--input-focus-border-color,
	unquote('hsl(from #{$component-active-bg} h s calc(l + 22.9))')
) !default;
$input-focus-box-shadow: var(
	--input-focus-box-shadow,
	$component-focus-box-shadow
) !default;
$input-focus-color: var(--input-focus-color, $input-color) !default;
$input-focus-width: $input-btn-focus-width !default;

// Input Disabled

$input-disabled-bg: var(--input-disabled-bg, $input-bg) !default;
$input-disabled-border-color: var(
	--input-disabled-border-color,
	$input-bg
) !default;
$input-disabled-color: var(--input-disabled-color, $gray-500) !default;
$input-disabled-cursor: $disabled-cursor !default;
$input-disabled-opacity: var(--input-disabled-opacity, 1) !default;

// Input Placeholder

$input-placeholder-color: var(--input-placeholder-color, $gray-600) !default;

$input-placeholder-focus-color: var(
	--input-focus-placeholder-color,
	$gray-600
) !default;

$input-placeholder-disabled-color: var(
	--input-disabled-placeholder-color,
	$input-disabled-color
) !default;

$input: () !default;
$input: map-deep-merge(
	(
		background-color: $input-bg,
		border-color: $input-border-color,
		border-style: $input-border-style,
		border-width: $input-border-width,
		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,
		border-radius: $input-border-radius,
		box-shadow: $input-box-shadow,
		color: $input-color,
		display: block,
		font-family: $input-font-family,
		font-size: $input-font-size,
		font-weight: $input-font-weight,
		height: $input-height,
		letter-spacing: inherit,
		line-height: $input-line-height,
		min-width: 0px,
		padding-bottom: $input-padding-y,
		padding-left: $input-padding-x,
		padding-right: $input-padding-x,
		padding-top: $input-padding-y,
		transition: $input-transition,
		width: 100%,

		mobile: (
			font-size: $input-font-size-mobile,
			height: $input-height-mobile,
		),

		placeholder: (
			color: $input-placeholder-color,
			opacity: 1,
		),

		focus: (
			background-color: $input-focus-bg,
			border-color: $input-focus-border-color,
			box-shadow: $input-focus-box-shadow,
			color: $input-focus-color,
			outline: 0,

			placeholder: (
				color: $input-placeholder-focus-color,
			),
		),

		focus-within: (
			background-color: $input-focus-bg,
			border-color: $input-focus-border-color,
			box-shadow: $input-focus-box-shadow,
			color: $input-focus-color,
		),

		disabled: (
			background-color: $input-disabled-bg,
			border-color: $input-disabled-border-color,
			color: $input-disabled-color,
			cursor: $input-disabled-cursor,
			opacity: $input-disabled-opacity,

			placeholder: (
				color: $input-placeholder-disabled-color,
			),
		),
	),
	$input
);

// Form Control Variants

$input-palette: () !default;
$input-palette: map-deep-merge(
	(
		'.form-control-shrink': (
			max-width: 100%,
			white-space: nowrap,
			width: min-content,
		),
	),
	$input-palette
);

// Form Control Plaintext

$input-plaintext-color: $body-color !default;

$input-plaintext: () !default;
$input-plaintext: map-deep-merge(
	(
		background-clip: border-box,
		background-color: transparent,
		border-bottom-width: $input-border-bottom-width,
		border-color: transparent,
		border-left-width: $input-border-left-width,
		border-right-width: $input-border-right-width,
		border-style: solid,
		border-top-width: $input-border-top-width,
		color: $input-plaintext-color,
		display: block,
		font-size: $input-font-size,
		height: $input-height,
		letter-spacing: inherit,
		line-height: $input-line-height,
		// match inputs if this class comes on inputs with default margins
		margin-bottom: 0px,
		min-width: 0px,
		padding-bottom: $input-padding-y,
		padding-left: 0px,
		padding-right: 0px,
		padding-top: $input-padding-y,
		text-overflow: ellipsis,
		width: 100%,
	),
	$input-plaintext
);

// Input Lg

$input-border-radius-lg: var(
	--input-lg-border-radius,
	$border-radius-lg
) !default;
$input-font-size-lg: var(
	--input-lg-font-size,
	$input-btn-font-size-lg
) !default;
$input-height-lg: var(--input-lg-height, 48px) !default;
$input-line-height-lg: var(
	--input-lg-line-height,
	$input-btn-line-height-lg
) !default;
$input-padding-x-lg: var(--input-lg-padding-x, $input-padding-x) !default;
$input-padding-y-lg: var(--input-lg-padding-y, $input-padding-y) !default;

$input-font-size-lg-mobile: null !default;
$input-height-lg-mobile: null !default;

$input-lg: () !default;
$input-lg: map-deep-merge(
	(
		border-radius: $input-border-radius-lg,
		font-size: $input-font-size-lg,
		height: $input-height-lg,
		line-height: $input-line-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,

		media-breakpoint-down: (
			sm: (
				font-size: $input-font-size-lg-mobile,
				height: $input-height-lg-mobile,
			),
		),
	),
	$input-lg
);

// Input Sm

$input-border-radius-sm: var(--input-sm-border-radius, $border-radius) !default;
$input-font-size-sm: var(
	--input-sm-font-size,
	$input-btn-font-size-sm
) !default;
$input-height-sm: var(--input-sm-height, 32px) !default;
$input-line-height-sm: var(
	--input-sm-line-height,
	$input-btn-line-height-sm
) !default;
$input-padding-x-sm: var(--input-sm-padding-x, 12px) !default;
$input-padding-y-sm: var(--input-sm-padding-y, 4px) !default;

$input-font-size-sm-mobile: null !default;
$input-height-sm-mobile: null !default;

$input-sm: () !default;
$input-sm: map-deep-merge(
	(
		border-radius: $input-border-radius-sm,
		font-size: $input-font-size-sm,
		height: $input-height-sm,
		line-height: $input-line-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,

		media-breakpoint-down: (
			sm: (
				height: $input-height-sm-mobile,
			),
		),
	),
	$input-sm
);

// Input Label (<label>)

$input-label-color: var(--input-label-color, $gray-900) !default;
$input-label-font-size: var(--input-label-font-size, 14px) !default;
$input-label-font-weight: var(
	--input-label-font-weight,
	$font-weight-semi-bold
) !default;
$input-label-margin-bottom: var(--input-label-margin-bottom, 4px) !default;

$input-label-font-size-mobile: null !default;

$input-label-for-cursor: $link-cursor !default;

$input-label-focus-color: var(--input-label-focus-color, $gray-900) !default;

$input-label-disabled-color: var(
	--input-label-disabled-color,
	$gray-500
) !default;
$input-label-disabled-cursor: $disabled-cursor !default;

// Label Reference Mark

$input-label-reference-mark-color: var(
	--input-label-reference-mark-color,
	$warning
) !default;
$input-label-reference-mark-font-size: var(
	--input-label-reference-mark-font-size,
	6px
) !default;
$input-label-reference-mark-spacer: var(
	--input-label-reference-mark-spacer,
	0px
) !default;
$input-label-reference-mark-vertical-align: var(
	--input-label-reference-mark-vertical-align,
	super
) !default;

$input-label: () !default;
$input-label: map-deep-merge(
	(
		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%,
		position: static,
		word-wrap: break-word,

		mobile: (
			font-size: $input-label-font-size-mobile,
		),

		focus: (
			color: $input-label-focus-color,
		),

		disabled: (
			color: $input-label-disabled-color,
			cursor: $input-label-disabled-cursor,
			opacity: $input-disabled-opacity,
		),

		for: (
			cursor: $input-label-for-cursor,
		),

		'+ .form-feedback-group': (
			margin-bottom: 12px,
		),

		form-text: (
			margin-bottom: $input-label-margin-bottom,
			margin-top: 0px,
		),

		form-help-text: (
			color: $secondary-l0,
			display: inline,
			font-size: 14px,
			font-weight: $font-weight-normal,
			margin-left: 8px,
			margin-top: 0px,
		),

		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,
		),
	),
	$input-label
);

// .form-control-label

$form-control-label: () !default;
$form-control-label: map-merge(
	(
		display: inline,
		margin-bottom: 0px,
	),
	$form-control-label
);

// .form-control-label-text

$form-control-label-text: () !default;
$form-control-label-text: map-merge(
	(
		cursor: map-deep-get($input-label, for, cursor),
		display: inline-block,
		margin-bottom: map-get($input-label, margin-bottom),
		max-width: 100%,
		word-wrap: break-word,
	),
	$form-control-label-text
);

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-bg: $white !default;

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-border-color: $input-border-color !default;

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-color: null !default;

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-cursor: null !default;

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-focus-bg: null !default;

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-focus-border-color: $input-focus-border-color !default;

// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead

$input-readonly-focus-color: null !default;

$input-readonly: () !default;
$input-readonly: map-deep-merge(
	(
		background-color:
			var(--input-readonly-background-color, $input-readonly-bg),
		border-color:
			var(--input-readonly-border-color, $input-readonly-border-color),
		color: var(--input-readonly-color, $input-readonly-color),
		cursor: $input-readonly-cursor,
		opacity: var(--input-readonly-opacity, 1),
		focus: (
			background-color:
				var(
					--input-readonly-focus-background-color,
					$input-readonly-focus-bg
				),
			border-color:
				var(
					--input-readonly-focus-border-color,
					$input-readonly-focus-border-color
				),
			box-shadow: none,
			color:
				var(--input-readonly-focus-color, $input-readonly-focus-color),
		),
	),
	$input-readonly
);

$input-plaintext-readonly: () !default;
$input-plaintext-readonly: map-deep-merge(
	(
		border-radius: $input-border-radius,
		outline: 0,
		transition: $input-transition,

		focus: (
			border-color: $input-focus-border-color,
			box-shadow: none,
		),
	),
	$input-plaintext-readonly
);

// textarea.form-control, textarea.form-control-plaintext, .form-control.form-control-textarea

$input-textarea-height: 100px !default;

$input-textarea: () !default;
$input-textarea: map-merge(
	(
		height: $input-textarea-height,
		resize: vertical,
	),
	$input-textarea
);

// textarea.form-control-lg, .form-control-lg.form-control-textarea

$input-textarea-height-lg: 120px !default;

$input-textarea-lg: () !default;
$input-textarea-lg: map-deep-merge(
	(
		height: $input-textarea-height-lg,
	),
	$input-textarea-lg
);

// textarea.form-control-sm, .form-control-sm.form-control-textarea

$input-textarea-height-sm: 80px !default;

$input-textarea-sm: () !default;
$input-textarea-sm: map-deep-merge(
	(
		height: $input-textarea-height-sm,
	),
	$input-textarea-sm
);

// Form Control Label (Labels inside Form Control Tag Group)

$form-control-label-size: () !default;
$form-control-label-size: map-deep-merge(
	(
		border-width: 1px,
		font-size: 12px,
		height: auto,
		margin-bottom: 5px,
		margin-right: 10px,
		margin-top: 5px,
		min-height: 24px,
		padding-bottom: 5px,
		padding-left: 8px,
		padding-right: 8px,
		padding-top: 5px,
		text-transform: none,

		label-item: (
			margin-bottom: -1px,
			margin-top: -1px,
		),
	),
	$form-control-label-size
);

// Form Control Tag Group

$form-control-tag-group-padding-y: calc(
	(
			#{$input-height} - #{$input-border-bottom-width} - #{$input-border-top-width} -
				#{map-get($form-control-label-size, min-height)} - #{map-get(
					$form-control-label-size,
					margin-bottom
				)} - #{map-get($form-control-label-size, margin-top)}
		) * 0.5
) !default;

$form-control-inset-min-height: calc(
	#{$input-font-size} * #{$input-line-height}
) !default;

$form-control-inset-margin-y: calc(
	(
			#{$input-height} - #{$input-border-bottom-width} - #{$input-border-top-width} -
				(#{$form-control-tag-group-padding-y} * 2) - #{$form-control-inset-min-height}
		) * 0.5
) !default;

$form-control-inset: () !default;
$form-control-inset: map-deep-merge(
	(
		background-color: transparent,
		border-width: 0px,
		color: $input-color,
		flex-grow: 1,
		margin-bottom: $form-control-inset-margin-y,
		margin-left: 8px,
		margin-top: $form-control-inset-margin-y,
		min-height: $form-control-inset-min-height,
		padding: 0px,
		width: 50px,

		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,
		),
	),
	$form-control-inset
);

$form-control-tag-group: () !default;
$form-control-tag-group: map-merge(
	(
		align-items: center,
		color: $secondary,
		display: flex,
		flex-wrap: wrap,
		height: auto,
		padding-bottom: $form-control-tag-group-padding-y,
		padding-left: 8px,
		padding-right: 8px,
		padding-top: $form-control-tag-group-padding-y,
	),
	$form-control-tag-group
);

$form-control-tag-group-autofit-row: () !default;
$form-control-tag-group-autofit-row: map-merge(
	(
		align-items: center,
		flex-grow: 1,
		margin-left: -8px,
		margin-right: -8px,
		width: auto,
	),
	$form-control-tag-group-autofit-row
);

$form-control-tag-group-autofit-col: () !default;
$form-control-tag-group-autofit-col: map-merge(
	(
		padding-left: 8px,
		padding-right: 8px,
	),
	$form-control-tag-group-autofit-col
);

$form-control-tag-group-input-group-item: () !default;
$form-control-tag-group-input-group-item: map-merge(
	(
		align-items: center,
	),
	$form-control-tag-group-input-group-item
);

$form-control-tag-group-inline-item: () !default;
$form-control-tag-group-inline-item: map-merge(
	(
		height: $form-control-inset-min-height,
		margin-bottom: $form-control-inset-margin-y,
		margin-top: $form-control-inset-margin-y,
	),
	$form-control-tag-group-inline-item
);

$form-control-tag-group-btn: () !default;
$form-control-tag-group-btn: map-deep-merge(
	(
		height: $form-control-inset-min-height,
		line-height: 1,
		margin-bottom: $form-control-inset-margin-y,
		margin-top: $form-control-inset-margin-y,
		padding-bottom: 0px,
		padding-left: $btn-padding-x-sm,
		padding-right: $btn-padding-x-sm,
		padding-top: 0px,
	),
	$form-control-tag-group-btn
);

$form-control-tag-group-btn-monospaced: () !default;
$form-control-tag-group-btn-monospaced: map-deep-merge(
	(
		height: $form-control-inset-min-height,
		line-height: 1,
		margin-bottom: $form-control-inset-margin-y,
		margin-top: $form-control-inset-margin-y,
		padding-left: 0px,
		padding-right: 0px,
		width: $form-control-inset-min-height,
	),
	$form-control-tag-group-btn-monospaced
);

$form-control-tag-group-component-action: () !default;
$form-control-tag-group-component-action: map-deep-merge(
	(
		height: 100%,
		margin-bottom: 0px,
		margin-top: 0px,
		width: 32px,
	),
	$form-control-tag-group-component-action
);

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

$form-control-tag-group-sm: () !default;
$form-control-tag-group-sm: map-deep-merge(
	(
		border-radius: clay-enable-rounded($input-border-radius-sm),
		font-size: $input-font-size-sm,
		height: auto,
		line-height: $input-line-height-sm,
		min-height: $input-height-sm,
		padding-bottom: 0px,
		padding-left: 4px,
		padding-right: 4px,
		padding-top: 0px,

		inline-item: (
			margin-bottom: 0px,
			margin-top: 0px,
		),

		label: (
			margin-bottom: 3px,
			margin-right: 4px,
			margin-top: 3px,
		),

		form-control-inset: (
			margin-bottom: 2px,
			margin-left: 8px,
			margin-top: 3px,
		),
	),
	$form-control-tag-group-sm
);

// Form Grid

// @deprecated as of v3.x with no replacement

$form-grid-gutter-width: 10px !default;

// .form-fieldset

$form-fieldset: () !default;

// .form-legend

$form-legend: () !default;

// Form Group

$form-group-margin-bottom: 24px !default;

$form-group-margin-bottom-mobile: 16px !default;

$form-group-sm-margin-bottom: 16px !default;

$form-group-sm-margin-bottom-mobile: null !default;

$form-group-sm-input-label-font-size: 12px !default;

$form-group-sm-input-label-line-height: 1.5 !default;

$form-group-sm-input-label-margin-bottom: 2px !default;

$form-group-sm-item-label-spacer: 25px !default;

// Form Group Autofit

$form-group-autofit-margin-bottom: $form-group-margin-bottom !default;

// Form Control File

$input-file-cursor: $link-cursor !default;

// Form Check

$form-check-input-cursor: $link-cursor !default;
$form-check-input-gutter: 0px !default;
$form-check-input-margin-y: 0px !default;

$form-check-label-cursor: $input-label-for-cursor !default;

$form-check-label-text-margin-left: -3px !default;
$form-check-label-text-padding-left: 8px !default;

$form-check-input-disabled-cursor: $disabled-cursor !default;

$form-check-label-text-disabled-cursor: $disabled-cursor !default;

// Form Check Inline

$form-check-inline-margin-x: 12px !default;

$form-check-inline-input-margin-x: auto !default;

// .form-feedback-group

$form-feedback-group: () !default;
$form-feedback-group: map-merge(
	(
		width: 100%,
		word-wrap: break-word,
	),
	$form-feedback-group
);

// .form-text

$form-text-color: $gray-600 !default;
$form-text-font-size: 14px !default;
$form-text-font-weight: $font-weight-semi-bold !default;
$form-text-margin-top: 4px !default;

$form-text: () !default;
$form-text: map-merge(
	(
		color: $form-text-color,
		display: block,
		font-size: $form-text-font-size,
		font-weight: $form-text-font-weight,
		margin-top: $form-text-margin-top,
		word-wrap: break-word,

		blockquote: (
			font-style: italic,
			font-weight: $font-weight-normal,
			margin-bottom: 0px,
			margin-top: 12px,
			padding-left: 12px,
			position: relative,

			before: (
				background-color: $secondary-l1,
				bottom: 0px,
				content: '',
				display: block,
				left: 0px,
				position: absolute,
				top: 0px,
				width: 2px,
			),
		),
	),
	$form-text
);

$form-help-text: () !default;
$form-help-text: map-deep-merge(
	(
		color: $secondary,
		display: block,
		font-size: 14px,
		margin-top: 4px,
	),
	$form-help-text
);

// .form-feedback-item

$form-feedback-font-size: 14px !default;
$form-feedback-font-weight: $font-weight-semi-bold !default;
$form-feedback-margin-top: 4px !default;

$form-feedback-item: () !default;
$form-feedback-item: map-merge(
	(
		font-size: $form-feedback-font-size,
		font-weight: $form-feedback-font-weight,
		margin-top: $form-feedback-margin-top,
		word-wrap: break-word,
	),
	$form-feedback-item
);

// .form-feedback-indicator

$form-feedback-indicator-margin-x: 0px !default;

$form-feedback-indicator: () !default;
$form-feedback-indicator: map-deep-merge(
	(
		margin-left: $form-feedback-indicator-margin-x,
		margin-right: $form-feedback-indicator-margin-x,

		first-child: (
			margin-left: 0px,
		),
	),
	$form-feedback-indicator
);

$form-feedback-valid-color: $success !default;

$form-feedback-warning-color: $warning !default;

$form-feedback-invalid-color: $danger !default;

// .has-error .form-control

$input-danger-bg: $danger-l2 !default;
$input-danger-border-color: $danger-l1 !default;
$input-danger-box-shadow: null !default;
$input-danger-color: $input-color !default;

$input-danger-focus-bg: $input-danger-bg !default;
$input-danger-focus-border-color: $input-danger-border-color !default;
$input-danger-focus-box-shadow: $input-focus-box-shadow !default;
$input-danger-focus-color: $input-danger-color !default;

$input-danger: () !default;
$input-danger: map-deep-merge(
	(
		background-color: var(--input-danger-background-color, $input-danger-bg),
		border-color:
			var(--input-danger-border-color, $input-danger-border-color),
		box-shadow: var(--input-danger-box-shadow, $input-danger-box-shadow),
		color: var(--input-danger-color, $input-danger-color),
		focus: (
			background-color:
				var(
					--input-danger-focus-background-color,
					$input-danger-focus-bg
				),
			border-color:
				var(
					--input-danger-focus-border-color,
					$input-danger-focus-border-color
				),
			box-shadow:
				var(
					--input-danger-focus-box-shadow,
					$input-danger-focus-box-shadow
				),
			color: var(--input-danger-focus-color, $input-danger-focus-color),
		),

		focus-within: (
			background-color: $input-danger-bg,
			border-color: $input-danger-border-color,
			box-shadow: $input-danger-box-shadow,
			color: $input-danger-color,
		),
	),
	$input-danger
);

// .has-error .form-control[readonly]

$input-danger-readonly: () !default;
$input-danger-readonly: map-deep-merge(
	(
		background-color: map-get($input-readonly, background-color),
		border-color: map-get($input-readonly, border-color),
		focus: (
			border-color: $input-focus-border-color,
		),
	),
	$input-danger-readonly
);

$input-danger-checkbox-label-color: $danger !default;

$input-danger-label-color: null !default;

// .has-error select.form-control

$input-danger-select-icon-color: $input-danger-border-color !default;

$input-danger-select-icon: var(
	--input-danger-select-icon,
	clay-icon(caret-double-l, #f48989)
) !default;

$input-danger-select: () !default;
$input-danger-select: map-deep-merge(
	(
		background-image: $input-danger-select-icon,
	),
	$input-danger-select
);

// .has-error select.form-control[size]

$input-danger-select-size: () !default;
$input-danger-select-size: map-deep-merge(
	(
		background-image: none,
	),
	$input-danger-select-size
);

// .has-error select.form-control[multiple]

$input-danger-select-multiple: () !default;
$input-danger-select-multiple: map-deep-merge(
	$input-danger-select-size,
	$input-danger-select-multiple
);

// .has-error

$has-error: () !default;
$has-error: map-deep-merge(
	(
		label: (
			color: $input-danger-label-color,
		),

		custom-control-label: (
			color: $input-danger-checkbox-label-color,
		),

		form-control:
			map-deep-merge(
				(
					readonly: $input-danger-readonly,
				),
				$input-danger
			),
		form-feedback-item: (
			color: $form-feedback-invalid-color,
		),

		select: (
			form-control:
				map-deep-merge(
					(
						multiple: $input-danger-select-multiple,
						size: $input-danger-select-size,
					),
					$input-danger-select
				),
		),

		input-group-item: (
			focus: (
				box-shadow:
					setter(
						$input-danger-focus-box-shadow,
						$input-danger-box-shadow
					),
				input-group-inset: (
					background-color:
						setter($input-danger-focus-bg, $input-danger-bg),
					border-color:
						setter(
							$input-danger-focus-border-color,
							$input-danger-border-color
						),
					input-group-inset-item: (
						background-color:
							setter($input-danger-focus-bg, $input-danger-bg),
						border-color:
							setter(
								$input-danger-focus-border-color,
								$input-danger-border-color
							),
					),
				),
			),

			input-group-inset: (
				input-group-inset-item: (
					background-color: $input-danger-bg,
					border-color: $input-danger-border-color,
					box-shadow: $input-danger-box-shadow,
				),

				focus: (
					box-shadow: none,

					input-group-inset-item: (
						background-color:
							setter($input-danger-focus-bg, $input-danger-bg),
						border-color:
							setter(
								$input-danger-focus-border-color,
								$input-danger-border-color
							),
					),
				),
			),
		),
	),
	$has-error
);

// .has-warning .form-control

$input-warning-bg: $warning-l2 !default;
$input-warning-border-color: $warning-l1 !default;
$input-warning-box-shadow: null !default;
$input-warning-color: $input-color !default;

$input-warning-focus-bg: $input-warning-bg !default;
$input-warning-focus-border-color: $input-warning-border-color !default;
$input-warning-focus-box-shadow: $input-focus-box-shadow !default;
$input-warning-focus-color: $input-warning-color !default;

$input-warning: () !default;
$input-warning: map-deep-merge(
	(
		background-color:
			var(--input-warning-background-color, $input-warning-bg),
		border-color:
			var(--input-warning-border-color, $input-warning-border-color),
		box-shadow: var(--input-warning-box-shadow, $input-warning-box-shadow),
		color: var(--input-warning-color, $input-warning-color),
		focus: (
			background-color:
				var(
					--input-warning-focus-background-color,
					$input-warning-focus-bg
				),
			border-color:
				var(
					--input-warning-focus-border-color,
					$input-warning-focus-border-color
				),
			box-shadow:
				var(
					--input-warning-focus-box-shadow,
					$input-warning-focus-box-shadow
				),
			color: var(--input-warning-focus-color, $input-warning-focus-color),
		),

		focus-within: (
			background-color: $input-warning-bg,
			border-color: $input-warning-border-color,
			box-shadow: $input-warning-box-shadow,
			color: $input-warning-color,
		),
	),
	$input-warning
);

// .has-warning .form-control[readonly]

$input-warning-readonly: () !default;
$input-warning-readonly: map-deep-merge(
	(
		background-color: map-get($input-readonly, background-color),
		border-color: map-get($input-readonly, border-color),
		focus: (
			border-color: $input-focus-border-color,
		),
	),
	$input-warning-readonly
);

$input-warning-checkbox-label-color: $warning !default;

$input-warning-label-color: null !default;

// .has-warning select.form-control

$input-warning-select-icon-color: $input-warning-border-color !default;

$input-warning-select-icon: var(
	--input-warning-select-icon,
	clay-icon(caret-double-l, #ff8f39)
) !default;

$input-warning-select: () !default;
$input-warning-select: map-deep-merge(
	(
		background-image: $input-warning-select-icon,
	),
	$input-warning-select
);

// .has-warning select.form-control[size]

$input-warning-select-size: () !default;
$input-warning-select-size: map-deep-merge(
	(
		background-image: none,
	),
	$input-warning-select-size
);

// .has-warning select.form-control[multiple]

$input-warning-select-multiple: () !default;
$input-warning-select-multiple: map-deep-merge(
	$input-warning-select-size,
	$input-warning-select-multiple
);

// .has-warning

$has-warning: () !default;
$has-warning: map-deep-merge(
	(
		label: (
			color: $input-warning-label-color,
		),

		custom-control-label: (
			color: $input-warning-checkbox-label-color,
		),

		form-control:
			map-deep-merge(
				(
					readonly: $input-warning-readonly,
				),
				$input-warning
			),
		form-feedback-item: (
			color: $form-feedback-warning-color,
		),

		select: (
			form-control:
				map-deep-merge(
					(
						multiple: $input-warning-select-multiple,
						size: $input-warning-select-size,
					),
					$input-warning-select
				),
		),

		input-group-item: (
			focus: (
				box-shadow:
					setter(
						$input-warning-focus-box-shadow,
						$input-warning-box-shadow
					),
				input-group-inset: (
					background-color:
						setter($input-warning-focus-bg, $input-warning-bg),
					border-color:
						setter(
							$input-warning-focus-border-color,
							$input-warning-border-color
						),
					input-group-inset-item: (
						background-color:
							setter($input-warning-focus-bg, $input-warning-bg),
						border-color:
							setter(
								$input-warning-focus-border-color,
								$input-warning-border-color
							),
					),
				),
			),

			input-group-inset: (
				input-group-inset-item: (
					background-color: $input-warning-bg,
					border-color: $input-warning-border-color,
					box-shadow: $input-warning-box-shadow,
				),

				focus: (
					box-shadow: none,

					input-group-inset-item: (
						background-color:
							setter($input-warning-focus-bg, $input-warning-bg),
						border-color:
							setter(
								$input-warning-focus-border-color,
								$input-warning-border-color
							),
					),
				),
			),
		),
	),
	$has-warning
);

// .has-success .form-control

$input-success-bg: $success-l2 !default;
$input-success-border-color: $success-l1 !default;
$input-success-box-shadow: null !default;
$input-success-color: $input-color !default;

$input-success-focus-bg: $input-success-bg !default;
$input-success-focus-border-color: $input-success-border-color !default;
$input-success-focus-box-shadow: $input-focus-box-shadow !default;
$input-success-focus-color: $input-success-color !default;

$input-success: () !default;
$input-success: map-deep-merge(
	(
		background-color:
			var(--input-success-background-color, $input-success-bg),
		border-color:
			var(--input-success-border-color, $input-success-border-color),
		box-shadow: var(--input-success-box-shadow, $input-success-box-shadow),
		color: var(--input-success-color, $input-success-color),
		focus: (
			background-color:
				var(
					--input-success-focus-background-color,
					$input-success-focus-bg
				),
			border-color:
				var(
					--input-success-focus-border-color,
					$input-success-focus-border-color
				),
			box-shadow:
				var(
					--input-success-focus-box-shadow,
					$input-success-focus-box-shadow
				),
			color: var(--input-success-focus-color, $input-success-focus-color),
		),

		focus-within: (
			background-color: $input-success-bg,
			border-color: $input-success-border-color,
			box-shadow: $input-success-box-shadow,
			color: $input-success-color,
		),
	),
	$input-success
);

// .has-success .form-control[readonly]

$input-success-readonly: () !default;
$input-success-readonly: map-deep-merge(
	(
		background-color: map-get($input-readonly, background-color),
		border-color: map-get($input-readonly, border-color),
		focus: (
			border-color: $input-focus-border-color,
		),
	),
	$input-success-readonly
);

$input-success-checkbox-label-color: $success !default;

$input-success-label-color: null !default;

// .has-success select.form-control

$input-success-select-icon-color: $input-success-border-color !default;

$input-success-select-icon: var(
	--input-success-select-icon,
	clay-icon(caret-double-l, #5aca75)
) !default;

$input-success-select: () !default;
$input-success-select: map-deep-merge(
	(
		background-image: $input-success-select-icon,
	),
	$input-success-select
);

// .has-success select.form-control[size]

$input-success-select-size: () !default;
$input-success-select-size: map-deep-merge(
	(
		background-image: none,
	),
	$input-success-select-size
);

// .has-success select.form-control[multiple]

$input-success-select-multiple: () !default;
$input-success-select-multiple: map-deep-merge(
	$input-success-select-size,
	$input-success-select-multiple
);

// .has-select

$has-success: () !default;
$has-success: map-deep-merge(
	(
		label: (
			color: $input-success-label-color,
		),

		custom-control-label: (
			color: $input-success-checkbox-label-color,
		),

		form-control:
			map-deep-merge(
				(
					readonly: $input-success-readonly,
				),
				$input-success
			),
		form-feedback-item: (
			color: $form-feedback-valid-color,
		),

		select: (
			form-control:
				map-deep-merge(
					(
						multiple: $input-success-select-multiple,
						size: $input-success-select-size,
					),
					$input-success-select
				),
		),

		input-group-item: (
			focus: (
				box-shadow:
					setter(
						$input-success-focus-box-shadow,
						$input-success-box-shadow
					),
				input-group-inset: (
					background-color:
						setter($input-success-focus-bg, $input-success-bg),
					border-color:
						setter(
							$input-success-focus-border-color,
							$input-success-border-color
						),
					input-group-inset-item: (
						background-color:
							setter($input-success-focus-bg, $input-success-bg),
						border-color:
							setter(
								$input-success-focus-border-color,
								$input-success-border-color
							),
					),
				),
			),

			input-group-inset: (
				input-group-inset-item: (
					background-color: $input-success-bg,
					border-color: $input-success-border-color,
					box-shadow: $input-success-box-shadow,
				),
				focus: (
					box-shadow: none,

					input-group-inset-item: (
						background-color:
							setter($input-success-focus-bg, $input-success-bg),
						border-color:
							setter(
								$input-success-focus-border-color,
								$input-success-border-color
							),
					),
				),
			),
		),
	),
	$has-success
);

// Select Element

$input-select-bg: $input-bg !default;
$input-select-bg-position: right 0.5em center !default;
$input-select-bg-size: 1.5em 1.5em !default;
$input-select-cursor: $link-cursor !default;
$input-select-padding-bottom: $input-padding-y !default;
$input-select-padding-left: $input-padding-x !default;
$input-select-padding-right: 2em !default;
$input-select-padding-top: $input-padding-y !default;

$input-select-focus-bg: $input-focus-bg !default;

$input-select-icon-color: $gray-600 !default;

$input-select-icon: var(
	--input-select-icon,
	clay-icon(caret-double-l, #6b6c7e)
) !default;

$input-select-icon-focus-color: $input-select-icon-color !default;

$input-select-icon-focus: var(
	--input-select-icon-focus,
	clay-icon(caret-double-l, #6b6c7e)
) !default;

$input-select-icon-disabled-color: $gray-500 !default;

$input-select-icon-disabled: var(
	--input-select-icon-disabled,
	clay-icon(caret-double-l, #a7a9bc)
) !default;

$input-select: () !default;
$input-select: map-deep-merge(
	(
		background-color: var(--input-select-background-color, $input-select-bg),
		background-image:
			var(--input-select-background-image, $input-select-icon),
		background-position:
			var(--input-select-background-position, $input-select-bg-position),
		background-repeat: no-repeat,
		background-size:
			var(--input-select-background-size, $input-select-bg-size),
		cursor: $input-select-cursor,
		padding-bottom:
			var(--input-select-padding-bottom, $input-select-padding-bottom),
		padding-left:
			var(--input-select-padding-left, $input-select-padding-left),
		padding-right:
			var(--input-select-padding-right, $input-select-padding-right),
		padding-top: var(--input-select-padding-top, $input-select-padding-top),
		focus: (
			background-color:
				var(
					--input-select-focus-background-color,
					$input-select-focus-bg
				),
			background-image:
				var(
					--input-select-focus-background-image,
					$input-select-icon-focus
				),
		),

		disabled: (
			background-image:
				var(
					--input-select-disabled-background-image,
					$input-select-icon-disabled
				),
			option: (
				cursor: $disabled-cursor,
			),
		),

		option: (
			cursor: $input-select-cursor,
		),
	),
	$input-select
);

// Form Control Select for Divs Styled Like Select

$form-control-select: () !default;
$form-control-select: map-deep-merge(
	(
		map-deep-merge(
			$input-select,
			(
				appearance: null,
				cursor: null,
				overflow: hidden,
				text-align: left,
				text-overflow: ellipsis,
				white-space: nowrap,

				hover: (
					color: inherit,
					text-decoration: none,
				),
			)
		)
	),
	$form-control-select
);

// Form Control Select Variants

$form-control-select-palette: () !default;
$form-control-select-palette: map-deep-merge(
	(
		form-control-select-secondary: (
			background-color: $white,
			border-color: $secondary-l0,
			color: $gray-600,

			hover: (
				color: $gray-600,
			),

			focus: (
				background-image:
					var(
						--form-control-select-secondary-icon-focus,
						clay-icon(caret-double-l, #272833)
					),
				color: $gray-900,
			),

			disabled: (
				background-color: $white,
				color: $gray-600,
				opacity: $component-disabled-opacity,
			),

			show: (
				background-color: $gray-200,
				background-image:
					var(
						--form-control-select-secondary-icon-show,
						clay-icon(caret-double-l, #272833)
					),
				color: $gray-900,
			),
		),

		'.form-control-select-shrink': (
			max-width: 100%,
			width: min-content,
		),
	),
	$form-control-select-palette
);

$form-control-select-sm: () !default;
$form-control-select-sm: map-deep-merge(
	(
		height: $input-height-sm,
		padding-right: 2em,

		mobile: (
			height: $input-height-sm-mobile,
		),
	),
	$form-control-select-sm
);

// Select Size

// scrollbar-width: Future proof https://github.com/w3c/csswg-drafts/issues/1958
// if/when it gets added
// focus.option.checked: Chrome can't style text, we invert colors to make text white
// option.checked: hack for changing the background-color
// firefox-only: undo some styles for Chrome to make it match Lexicon

$input-select-size: () !default;
$input-select-size: map-deep-merge(
	(
		background-image: none,
		height: auto,
		padding-left: 8px,
		padding-right: 8px,
		scrollbar-width: thin,

		focus: (
			background-image: none,

			option: (
				checked: (
					background-image: linear-gradient(#ffa700, #ffa700),
					filter: invert(100%),
				),
			),
		),

		disabled: (
			option: (
				hover: (
					background-image: none,
				),
			),
		),

		option: (
			padding: 7px 8px,

			checked: (
				background-image: linear-gradient(#{$gray-300}, #{$gray-300}),
			),
		),

		firefox-only: (
			focus: (
				option: (
					checked: (
						background-image:
							linear-gradient(#{$primary-d2}, #{$primary-d2}),
						filter: invert(0),
					),
				),
			),

			option: (
				padding: 6.5px 8px,
			),
		),
	),
	$input-select-size
);

// Select Multiple

$input-select-multiple: () !default;
$input-select-multiple: map-deep-merge(
	$input-select-size,
	$input-select-multiple
);

// Form Group Autofit

$form-group-item-label-max-width: 200px !default;
$form-group-item-label-spacer: calc(
	#{$input-label-font-size} * #{$line-height-base} + #{$input-label-margin-bottom}
) !default;

// .input-group

$input-group: () !default;
$input-group: map-deep-merge(
	(
		align-items: stretch,
		display: flex,
		flex-wrap: wrap,
		position: relative,
		width: 100%,

		btn-unstyled: (
			color: inherit,
		),
	),
	$input-group
);

// .input-group-text

$input-group-addon-bg: $gray-300 !default;
$input-group-addon-border-color: $input-group-addon-bg !default;
$input-group-addon-color: $gray-600 !default;
$input-group-addon-font-weight: $font-weight-semi-bold !default;
$input-group-addon-min-width: 40px !default;
$input-group-addon-padding-x: 12px !default;
$input-group-addon-padding-y: $input-padding-y !default;

$input-group-text: () !default;
$input-group-text: map-deep-merge(
	(
		align-items: center,
		background-color: $input-group-addon-bg,
		border-bottom-width: $input-border-bottom-width,
		border-color: $input-group-addon-border-color,
		border-left-width: $input-border-left-width,
		border-radius: clay-enable-rounded($input-border-radius),
		border-right-width: $input-border-right-width,
		border-style: solid,
		border-top-width: $input-border-top-width,
		color: $input-group-addon-color,
		display: flex,
		font-size: $input-font-size,
		font-weight: $input-group-addon-font-weight,
		height: $input-height,
		justify-content: center,
		line-height: $input-line-height,
		margin-bottom: 0px,
		min-width: $input-group-addon-min-width,
		padding-bottom: $input-group-addon-padding-y,
		padding-left: $input-group-addon-padding-x,
		padding-right: $input-group-addon-padding-x,
		padding-top: $input-group-addon-padding-y,
		text-align: center,
		white-space: nowrap,

		label: (
			color: $input-group-addon-color,
		),

		custom-control: (
			margin-bottom: 0px,
		),

		form-check: (
			margin-bottom: 0px,

			input: (
				margin-top: 0px,
			),
		),

		lexicon-icon: (
			margin-top: 0px,
		),

		media-breakpoint-down: (
			sm: (
				height: $input-height-mobile,
			),
		),
	),
	$input-group-text
);

// .input-group-text-secondary

$input-group-secondary-addon-bg: $white !default;
$input-group-secondary-addon-border-color: $secondary-l2 !default;
$input-group-secondary-addon-border-width: 1px !default;
$input-group-secondary-addon-color: $secondary !default;

$input-group-text-secondary: () !default;
$input-group-text-secondary: map-deep-merge(
	(
		background-color: $input-group-secondary-addon-bg,
		border-color: $input-group-secondary-addon-border-color,
		border-width: $input-group-secondary-addon-border-width,
		color: $input-group-secondary-addon-color,
		z-index: 2,

		label: (
			color: $input-group-secondary-addon-color,
		),
	),
	$input-group-text-secondary
);

// .input-group-item

$input-group-item-margin-left: 8px !default;

$input-group-item: () !default;
$input-group-item: map-deep-merge(
	(
		display: flex,
		flex-grow: 1,
		flex-wrap: wrap,
		margin-left: $input-group-item-margin-left,
		width: 1%,
		word-wrap: break-word,

		focus: (
			border-radius: clay-enable-rounded($input-border-radius),
			box-shadow: $input-focus-box-shadow,

			input-group-prepend: (
				border-bottom-right-radius: clay-enable-rounded(0),
				border-top-right-radius: clay-enable-rounded(0),
				z-index: 1,
			),

			input-group-append: (
				border-bottom-left-radius: clay-enable-rounded(0),
				border-top-left-radius: clay-enable-rounded(0),
			),

			form-control: (
				background-color: $input-focus-bg,
				border-color: $input-focus-border-color,
			),

			input-group-inset-item: (
				background-color: $input-focus-bg,
				border-color: $input-focus-border-color,
			),
		),

		first-child: (
			margin-left: 0px,
		),

		btn: (
			align-self: flex-start,
		),

		dropdown: (
			display: flex,
			flex-wrap: wrap,
			word-wrap: break-word,
			width: 100%,
		),
	),
	$input-group-item
);

// .input-group-item-shrink

$input-group-item-shrink: () !default;
$input-group-item-shrink: map-deep-merge(
	(
		flex-grow: 0,
		width: auto,
	),
	$input-group-item-shrink
);

// .input-group-item-focusable

$input-group-item-focusable: () !default;
$input-group-item-focusable: map-deep-merge(
	(
		border-radius: clay-enable-rounded($input-border-radius),
		transition: clay-enable-transitions($input-transition),
		focus-within: (
			background-color: $input-focus-bg,
			box-shadow: $input-focus-box-shadow,
			outline: 0,
			z-index: 1,
		),
	),
	$input-group-item-focusable
);

// Input Group Inset

$input-group-inset-item-color: $input-group-addon-color !default;
$input-group-inset-item-padding-left: 4px !default;
$input-group-inset-item-padding-right: 4px !default;

$input-group-inset-item-btn: () !default;
$input-group-inset-item-btn: map-deep-merge(
	(
		align-items: center,
		display: flex,
		height: 75%,
		justify-content: center,
		line-height: 1,
		margin-left: 4px,
		margin-right: 4px,
		padding-bottom: 0px,
		padding-left: 8px,
		padding-right: 8px,
		padding-top: 0px,

		c-inner: (
			align-items: center,
			display: flex,
			height: 100%,
			justify-content: center,
		),

		lexicon-icon: (
			margin-top: 0px,
		),
	),
	$input-group-inset-item-btn
);

$input-group-inset-item-btn-monospaced: () !default;
$input-group-inset-item-btn-monospaced: map-deep-merge(
	(
		font-size: 16px,
		height: 32px,
		margin-bottom: calc(#{$input-border-bottom-width} * -1),
		margin-top: calc(#{$input-border-bottom-width} * -1),
		padding: 0px,
		width: 32px,
	),
	$input-group-inset-item-btn-monospaced
);

$input-group-inset-form-file-btn: () !default;
$input-group-inset-form-file-btn: map-deep-merge(
	(
		height: 100%,
	),
	$input-group-inset-form-file-btn
);

// .input-group-lg

$input-group-addon-min-width-lg: 48px !default;
$input-group-addon-padding-x-lg: $input-padding-x-lg !default;
$input-group-addon-padding-y-lg: null !default;

$input-group-lg-item-btn: () !default;
$input-group-lg-item-btn: map-deep-merge(
	(
		breakpoint-down: null,
		font-size: $btn-font-size-lg,

		inline-item-font-size: $btn-inline-item-font-size-lg,

		section-font-size: $btn-section-font-size-lg,

		// font-size-mobile: $btn-font-size-lg-mobile,
		// padding-bottom-mobile: $btn-padding-y-lg-mobile,
		// padding-left-mobile: $btn-padding-x-lg-mobile,
		// padding-right-mobile: $btn-padding-x-lg-mobile,
		// padding-top-mobile: $btn-padding-y-lg-mobile,
	),
	$input-group-lg-item-btn
);

$input-group-lg-item-btn-monospaced: () !default;
$input-group-lg-item-btn-monospaced: map-deep-merge(
	(
		breakpoint-down: null,
		height: $btn-monospaced-size-lg,
		line-height: 1,
		// padding-bottom: $btn-monospaced-padding-y-lg,
		// padding-left: $btn-monospaced-padding-x-lg,
		// padding-right: $btn-monospaced-padding-x-lg,
		// padding-top: $btn-monospaced-padding-y-lg,
		// width: $btn-monospaced-size-lg,
		// height-mobile: $btn-monospaced-size-lg-mobile,
		// width-mobile: $btn-monospaced-size-lg-mobile,
	),
	$input-group-lg-item-btn-monospaced
);

$input-group-lg-inset-item-btn: () !default;

$input-group-lg-inset-item-btn-monospaced: () !default;

$input-group-lg-inset-item-form-file-btn: () !default;
$input-group-lg-inset-item-form-file-btn: map-deep-merge(
	(
		breakpoint-down: null,
		height: 100%,
		line-height: 1,
		padding-bottom: 0px,
		padding-left: 12px,
		padding-right: 12px,
		padding-top: 0px,
	),
	$input-group-lg-inset-item-form-file-btn
);

$input-group-lg: () !default;
$input-group-lg: map-deep-merge(
	(
		input-group-item: (
			btn: $input-group-lg-item-btn,

			btn-monospaced: $input-group-lg-item-btn-monospaced,

			form-control: (
				border-radius: clay-enable-rounded($input-border-radius-lg),
				font-size: $input-font-size-lg,
				height: $input-height-lg,
				line-height: $input-line-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,
			),

			form-control-inset: (
				margin-bottom: 0px,
				margin-top: 0px,
			),

			form-file: (
				btn: (
					border-radius: clay-enable-rounded($input-border-radius-lg),
					font-size: $input-font-size-lg,
					height: $input-height-lg,
					line-height: $input-line-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,
				),
			),

			textarea: (
				height: $input-textarea-height-lg,
			),

			form-control-plaintext: (
				font-size: $input-font-size-lg,
				height: $input-height-lg,
				line-height: $input-line-height-lg,
				padding-bottom: $input-padding-y-lg,
				padding-top: $input-padding-y-lg,
			),

			input-group-text: (
				border-radius: clay-enable-rounded($input-border-radius-lg),
				font-size: $input-font-size-lg,
				height: $input-height-lg,
				min-width: $input-group-addon-min-width-lg,
				padding-bottom: $input-group-addon-padding-y-lg,
				padding-left: $input-group-addon-padding-x-lg,
				padding-right: $input-group-addon-padding-x-lg,
				padding-top: $input-group-addon-padding-y-lg,
			),

			input-group-inset-item: (
				btn: $input-group-lg-inset-item-btn,

				btn-monospaced: $input-group-lg-inset-item-btn-monospaced,

				form-file: (
					height: 75%,

					btn: $input-group-lg-inset-item-form-file-btn,
				),
			),
		),

		media-breakpoint-down: (
			sm: (
				input-group-item: (
					form-control: (
						height: $input-height-lg-mobile,
					),

					form-file: (
						btn: (
							height: $input-height-lg-mobile,
						),
					),

					form-control-plaintext: (
						height: $input-height-lg-mobile,
					),
				),
			),
		),
	),
	$input-group-lg
);

// .input-group-sm

$input-group-addon-min-width-sm: 32px !default;
$input-group-addon-padding-x-sm: $input-padding-x-sm !default;
$input-group-addon-padding-y-sm: null !default;

$input-group-sm-item-btn: () !default;
$input-group-sm-item-btn: map-deep-merge(
	(
		font-size: $btn-font-size-sm,

		inline-item-font-size: $btn-inline-item-font-size-sm,

		section-font-size: $btn-section-font-size-sm,

		// font-size-mobile: $btn-font-size-sm-mobile,
		// padding-bottom-mobile: $btn-padding-y-sm-mobile,
		// padding-left-mobile: $btn-padding-x-sm-mobile,
		// padding-right-mobile: $btn-padding-x-sm-mobile,
		// padding-top-mobile: $btn-padding-y-sm-mobile,
	),
	$input-group-sm-item-btn
);

$input-group-sm-item-btn-monospaced: () !default;
$input-group-sm-item-btn-monospaced: map-deep-merge(
	(
		height: $btn-monospaced-size-sm,
		line-height: 1,
		padding-bottom: $btn-monospaced-padding-y-sm,
		padding-left: $btn-monospaced-padding-x-sm,
		padding-right: $btn-monospaced-padding-x-sm,
		padding-top: $btn-monospaced-padding-y-sm,
		width: $btn-monospaced-size-sm,

		height-mobile: $btn-monospaced-size-sm-mobile,
		width-mobile: $btn-monospaced-size-sm-mobile,
	),
	$input-group-sm-item-btn-monospaced
);

$input-group-sm-inset-item-btn: () !default;
$input-group-sm-inset-item-btn: map-deep-merge(
	(
		line-height: 1,
		padding-bottom: 0px,
		padding-left: 8px,
		padding-right: 8px,
		padding-top: 0px,
	),
	$input-group-sm-inset-item-btn
);

$input-group-sm-inset-item-btn-monospaced: () !default;
$input-group-sm-inset-item-btn-monospaced: map-deep-merge(
	(
		height: 24px,
		margin-left: 4px,
		margin-right: 4px,
		width: 24px,
	),
	$input-group-sm-inset-item-btn-monospaced
);

$input-group-sm-inset-item-form-file-btn: () !default;
$input-group-sm-inset-item-form-file-btn: map-deep-merge(
	(
		height: 100%,
		line-height: 1,
		padding-bottom: 0px,
		padding-left: 8px,
		padding-right: 8px,
		padding-top: 0px,
	),
	$input-group-sm-inset-item-form-file-btn
);

$input-group-sm: () !default;
$input-group-sm: map-deep-merge(
	(
		input-group-item: (
			btn: $input-group-sm-item-btn,

			btn-monospaced: $input-group-sm-item-btn-monospaced,

			form-file: (
				btn: (
					border-radius: clay-enable-rounded($input-border-radius-sm),
					font-size: $input-font-size-sm,
					height: $input-height-sm,
					line-height: $input-line-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,
				),
			),

			form-control-plaintext: (
				font-size: $input-font-size-sm,
				height: $input-height-sm,
				line-height: $input-line-height-sm,
				padding-bottom: $input-padding-y-sm,
				padding-top: $input-padding-y-sm,
			),

			textarea: (
				height: $input-textarea-height-sm,
			),

			input-group-text: (
				border-radius: clay-enable-rounded($input-border-radius-sm),
				font-size: $input-font-size-sm,
				height: $input-height-sm,
				min-width: $input-group-addon-min-width-sm,
				padding-bottom: $input-group-addon-padding-y-sm,
				padding-left: $input-group-addon-padding-x-sm,
				padding-right: $input-group-addon-padding-x-sm,
				padding-top: $input-group-addon-padding-y-sm,
			),

			input-group-inset-item: (
				btn: $input-group-sm-inset-item-btn,

				btn-monospaced: $input-group-sm-inset-item-btn-monospaced,

				form-file: (
					height: 75%,

					btn: $input-group-sm-inset-item-form-file-btn,
				),
			),
		),

		media-breakpoint-down: (
			sm: (
				input-group-item: (
					form-control: (
						height: $input-height-sm-mobile,
					),

					form-file: (
						btn: (
							height: $input-height-sm-mobile,
						),
					),

					form-control-plaintext: (
						height: $input-height-sm-mobile,
					),
				),
			),
		),
	),
	$input-group-sm
);

// .input-group-inset

$input-group-inset: () !default;
$input-group-inset: map-deep-merge(
	(
		flex-grow: 1,
		order: 5,
		width: 1%,

		focus: (
			box-shadow: none,

			input-group-inset-item: (
				background-color: $input-focus-bg,
				border-color: $input-focus-border-color,
			),
		),

		disabled: (
			input-group-inset-item: (
				background-color: $input-disabled-bg,
				border-color: $input-disabled-border-color,
			),
		),
	),
	$input-group-inset
);

// .input-group-inset[readonly]

$input-group-inset-readonly: () !default;
$input-group-inset-readonly: map-deep-merge(
	(
		input-group-inset-item: (
			background-color: $input-readonly-bg,
			border-color: $input-readonly-border-color,
			color: $input-readonly-color,
			cursor: $input-readonly-cursor,
		),

		focus: (
			input-group-inset-item: (
				background-color: $input-readonly-focus-bg,
				border-color: $input-readonly-focus-border-color,
				color: $input-readonly-focus-color,
			),
		),
	),
	$input-group-inset-readonly
);

// Input Group Stacked

$input-group-stacked-sm-down: () !default;
$input-group-stacked-sm-down: map-deep-merge(
	(
		breakpoint: sm,
		item-margin-bottom: 8px,
		item-margin-left: 0px,
		shrink-margin-right: 8px,
	),
	$input-group-stacked-sm-down
);