@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_forms.scss

@@ -3,10 +3,10 @@ $input-border-color: $gray-400 !default;
 $input-border-style: solid !default;
 $input-border-width: 0.0625rem !default;
 
-$input-border-top-width: 0.0625rem !default;
-$input-border-right-width: 0.0625rem !default;
 $input-border-bottom-width: 0.0625rem !default;
 $input-border-left-width: 0.0625rem !default;
+$input-border-right-width: 0.0625rem !default;
+$input-border-top-width: 0.0625rem !default;
 
 $input-border-radius: $border-radius !default;
 $input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default;
@@ -33,9 +33,9 @@ $input-placeholder-color: $gray-600 !default;
 
 $input-focus-bg: $input-bg !default;
 $input-focus-border-color: clay-lighten($component-active-bg, 25%) !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $input-focus-color: $input-color !default;
 $input-focus-width: $input-btn-focus-width !default;
-$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 
 // .form-control:focus::placeholder
 
@@ -58,13 +58,14 @@ $input: map-deep-merge(
 	(
 		background-color: $input-bg,
 		border-color: $input-border-color,
+		border-radius: clay-enable-rounded($input-border-radius),
 		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: clay-enable-rounded($input-border-radius),
 		box-shadow: clay-enable-shadows([$input-box-shadow]),
 		color: $input-color,
 		display: block,
@@ -74,43 +75,50 @@ $input: map-deep-merge(
 		height: $input-height,
 		letter-spacing: inherit,
 		line-height: $input-line-height,
-		min-width: 0,
+		min-width: 0rem,
 		padding-bottom: $input-padding-y,
 		padding-left: $input-padding-x,
 		padding-right: $input-padding-x,
 		padding-top: $input-padding-y,
 		transition: clay-enable-transitions($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,
 			),
@@ -155,11 +163,11 @@ $input-plaintext: map-deep-merge(
 		letter-spacing: inherit,
 		line-height: $input-line-height,
 		// match inputs if this class comes on inputs with default margins
-		margin-bottom: 0,
-		min-width: 0,
+		margin-bottom: 0rem,
+		min-width: 0rem,
 		padding-bottom: $input-padding-y,
-		padding-left: 0,
-		padding-right: 0,
+		padding-left: 0rem,
+		padding-right: 0rem,
 		padding-top: $input-padding-y,
 		text-overflow: ellipsis,
 		width: 100%,
@@ -208,6 +216,7 @@ $input-lg: map-deep-merge(
 		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,
@@ -241,6 +250,7 @@ $input-sm: map-deep-merge(
 		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,
@@ -284,35 +294,43 @@ $input-label: map-deep-merge(
 		margin-bottom: $input-label-margin-bottom,
 		max-width: 100%,
 		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: 0.75rem,
 		),
+
 		form-text: (
 			margin-bottom: $input-label-margin-bottom,
-			margin-top: 0,
+			margin-top: 0rem,
 		),
+
 		form-help-text: (
 			color: $secondary-l0,
 			display: inline,
 			font-size: 0.875rem,
 			font-weight: $font-weight-normal,
 			margin-left: 0.5rem,
-			margin-top: 0,
+			margin-top: 0rem,
 		),
+
 		reference-mark: (
 			color: $input-label-reference-mark-color,
 			font-size: $input-label-reference-mark-font-size,
@@ -330,7 +348,7 @@ $form-control-label: () !default;
 $form-control-label: map-merge(
 	(
 		display: inline,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 	),
 	$form-control-label
 );
@@ -385,6 +403,7 @@ $input-readonly: map-deep-merge(
 		color: $input-readonly-color,
 		cursor: $input-readonly-cursor,
 		opacity: 1,
+
 		focus: (
 			background-color: $input-readonly-focus-bg,
 			border-color: $input-readonly-focus-border-color,
@@ -461,16 +480,18 @@ $form-control-label-size: map-deep-merge(
 
 // Form Control Tag Group
 
-$form-control-tag-group-padding-y: (
-		$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-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: 1.5rem !default;
 $form-control-inset-margin-y: 0.125rem !default;
+$form-control-inset-min-height: 1.5rem !default;
 
 $form-control-inset: () !default;
 $form-control-inset: map-deep-merge(
@@ -483,11 +504,13 @@ $form-control-inset: map-deep-merge(
 		margin-left: 0.25rem,
 		margin-top: $form-control-inset-margin-y,
 		min-height: $form-control-inset-min-height,
-		padding: 0,
+		padding: 0rem,
 		width: 50px,
+
 		focus: (
 			outline: 0,
 		),
+
 		disabled: (
 			background-color: $input-disabled-bg,
 			border-color: $input-disabled-border-color,
@@ -561,12 +584,12 @@ $form-control-tag-group-btn: map-deep-merge(
 		line-height: 1,
 		margin-bottom: $form-control-inset-margin-y,
 		margin-top: $form-control-inset-margin-y,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left:
 			if(variable-exists(btn-padding-x-sm), $btn-padding-x-sm, 0.5rem),
 		padding-right:
 			if(variable-exists(btn-padding-x-sm), $btn-padding-x-sm, 0.5rem),
-		padding-top: 0,
+		padding-top: 0rem,
 	),
 	$form-control-tag-group-btn
 );
@@ -578,8 +601,8 @@ $form-control-tag-group-btn-monospaced: map-deep-merge(
 		line-height: 1,
 		margin-bottom: $form-control-inset-margin-y,
 		margin-top: $form-control-inset-margin-y,
-		padding-left: 0,
-		padding-right: 0,
+		padding-left: 0rem,
+		padding-right: 0rem,
 		width: $form-control-inset-min-height,
 	),
 	$form-control-tag-group-btn-monospaced
@@ -589,8 +612,8 @@ $form-control-tag-group-component-action: () !default;
 $form-control-tag-group-component-action: map-deep-merge(
 	(
 		height: 100%,
-		margin-bottom: 0,
-		margin-top: 0,
+		margin-bottom: 0rem,
+		margin-top: 0rem,
 		width: 2rem,
 	),
 	$form-control-tag-group-component-action
@@ -606,19 +629,22 @@ $form-control-tag-group-sm: map-deep-merge(
 		height: auto,
 		line-height: $input-line-height-sm,
 		min-height: $input-height-sm,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.25rem,
 		padding-right: 0.25rem,
-		padding-top: 0,
+		padding-top: 0rem,
+
 		inline-item: (
-			margin-bottom: 0,
-			margin-top: 0,
+			margin-bottom: 0rem,
+			margin-top: 0rem,
 		),
+
 		label: (
 			margin-bottom: 0.1875rem,
 			margin-right: 0.25rem,
 			margin-top: 0.1875rem,
 		),
+
 		form-control-inset: (
 			margin-bottom: 0.125rem,
 			margin-left: 0.25rem,
@@ -649,10 +675,13 @@ $form-group-margin-bottom: 1rem !default;
 $form-group-margin-bottom-mobile: null !default;
 
 $form-group-sm-margin-bottom: 1rem !default; // 16px
-$form-group-sm-margin-bottom-mobile: null !default;
+
 $form-group-sm-input-label-margin-bottom: 0.25rem !default; // 4px
+
 $form-group-sm-item-label-spacer: 1.75rem !default; // 28px
 
+$form-group-sm-margin-bottom-mobile: null !default;
+
 // Form Group Autofit
 
 $form-group-autofit-margin-bottom: $form-group-margin-bottom !default;
@@ -664,16 +693,17 @@ $input-file-cursor: $link-cursor !default;
 // Form Check
 
 $form-check-input-cursor: $link-cursor !default;
-$form-check-input-gutter: 0 !default;
+$form-check-input-gutter: 0rem !default;
 $form-check-input-margin-x: 0.25rem !default;
-$form-check-input-margin-y: 0 !default;
+$form-check-input-margin-y: 0rem !default;
+
+$form-check-input-disabled-cursor: $disabled-cursor !default;
 
 $form-check-label-cursor: $input-label-for-cursor !default;
 
 $form-check-label-text-margin-left: -0.1875rem !default;
 $form-check-label-text-padding-left: 0.5rem !default;
 
-$form-check-input-disabled-cursor: $disabled-cursor !default;
 $form-check-label-text-disabled-cursor: $disabled-cursor !default;
 
 // Form Check Inline
@@ -709,21 +739,23 @@ $form-text: map-merge(
 		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: 0,
+			margin-bottom: 0rem,
 			margin-top: 0.75rem,
 			padding-left: 0.75rem,
 			position: relative,
+
 			before: (
 				background-color: $secondary-l1,
-				bottom: 0,
+				bottom: 0rem,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0rem,
 				position: absolute,
-				top: 0,
+				top: 0rem,
 				width: 0.125rem,
 			),
 		),
@@ -768,8 +800,9 @@ $form-feedback-indicator: map-deep-merge(
 	(
 		margin-left: $form-feedback-indicator-margin-x,
 		margin-right: $form-feedback-indicator-margin-x,
+
 		first-child: (
-			margin-left: 0,
+			margin-left: 0rem,
 		),
 	),
 	$form-feedback-indicator
@@ -806,10 +839,13 @@ $form-validation-states: map-merge(
 	(
 		'valid': (
 			'color': $form-feedback-valid-color,
+
 			'icon': $form-feedback-icon-valid,
 		),
+
 		'invalid': (
 			'color': $form-feedback-invalid-color,
+
 			'icon': $form-feedback-icon-invalid,
 		),
 	),
@@ -836,12 +872,14 @@ $input-danger: map-deep-merge(
 		border-color: $input-danger-border-color,
 		box-shadow: $input-danger-box-shadow,
 		color: $input-danger-color,
+
 		focus: (
 			background-color: $input-danger-focus-bg,
 			border-color: $input-danger-focus-border-color,
 			box-shadow: $input-danger-focus-box-shadow,
 			color: $input-danger-focus-color,
 		),
+
 		focus-within: (
 			background-color: $input-danger-bg,
 			border-color: $input-danger-border-color,
@@ -857,11 +895,13 @@ $input-danger: map-deep-merge(
 $input-danger-readonly: () !default;
 
 $input-danger-checkbox-label-color: $form-feedback-invalid-color !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: clay-str-replace(
 	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$input-danger-select-icon-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
 	'#',
@@ -902,9 +942,11 @@ $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(
 				(
@@ -915,6 +957,7 @@ $has-error: map-deep-merge(
 		form-feedback-item: (
 			color: $form-feedback-invalid-color,
 		),
+
 		select: (
 			form-control:
 				map-deep-merge(
@@ -925,6 +968,7 @@ $has-error: map-deep-merge(
 					$input-danger-select
 				),
 		),
+
 		input-group-item: (
 			focus: (
 				box-shadow:
@@ -951,14 +995,17 @@ $has-error: map-deep-merge(
 					),
 				),
 			),
+
 			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),
@@ -995,12 +1042,14 @@ $input-warning: map-deep-merge(
 		border-color: $input-warning-border-color,
 		box-shadow: $input-warning-box-shadow,
 		color: $input-warning-color,
+
 		focus: (
 			background-color: $input-warning-focus-bg,
 			border-color: $input-warning-focus-border-color,
 			box-shadow: $input-warning-focus-box-shadow,
 			color: $input-warning-focus-color,
 		),
+
 		focus-within: (
 			background-color: $input-warning-bg,
 			border-color: $input-warning-border-color,
@@ -1016,11 +1065,13 @@ $input-warning: map-deep-merge(
 $input-warning-readonly: () !default;
 
 $input-warning-checkbox-label-color: $form-feedback-warning-color !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: clay-str-replace(
 	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$input-warning-select-icon-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
 	'#',
@@ -1061,9 +1112,11 @@ $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(
 				(
@@ -1074,6 +1127,7 @@ $has-warning: map-deep-merge(
 		form-feedback-item: (
 			color: $form-feedback-warning-color,
 		),
+
 		select: (
 			form-control:
 				map-deep-merge(
@@ -1084,6 +1138,7 @@ $has-warning: map-deep-merge(
 					$input-warning-select
 				),
 		),
+
 		input-group-item: (
 			focus: (
 				box-shadow:
@@ -1110,14 +1165,17 @@ $has-warning: map-deep-merge(
 					),
 				),
 			),
+
 			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),
@@ -1154,12 +1212,14 @@ $input-success: map-deep-merge(
 		border-color: $input-success-border-color,
 		box-shadow: $input-success-box-shadow,
 		color: $input-success-color,
+
 		focus: (
 			background-color: $input-success-focus-bg,
 			border-color: $input-success-focus-border-color,
 			box-shadow: $input-success-focus-box-shadow,
 			color: $input-success-focus-color,
 		),
+
 		focus-within: (
 			background-color: $input-success-bg,
 			border-color: $input-success-border-color,
@@ -1175,11 +1235,13 @@ $input-success: map-deep-merge(
 $input-success-readonly: () !default;
 
 $input-success-checkbox-label-color: $form-feedback-valid-color !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: clay-str-replace(
 	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$input-success-select-icon-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
 	'#',
@@ -1220,9 +1282,11 @@ $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(
 				(
@@ -1233,6 +1297,7 @@ $has-success: map-deep-merge(
 		form-feedback-item: (
 			color: $form-feedback-valid-color,
 		),
+
 		select: (
 			form-control:
 				map-deep-merge(
@@ -1243,6 +1308,7 @@ $has-success: map-deep-merge(
 					$input-success-select
 				),
 		),
+
 		input-group-item: (
 			focus: (
 				box-shadow:
@@ -1269,14 +1335,17 @@ $has-success: map-deep-merge(
 					),
 				),
 			),
+
 			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),
@@ -1303,10 +1372,11 @@ $input-select-bg-size: 8px 10px !default;
 $input-select-cursor: $link-cursor !default;
 $input-select-padding-bottom: null !default;
 $input-select-padding-left: null !default;
-$input-select-padding-right: 1rem + $input-btn-padding-x !default;
+$input-select-padding-right: calc(1rem + #{$input-btn-padding-x}) !default;
 $input-select-padding-top: null !default;
 
 $input-select-icon-color: $input-color !default;
+
 $input-select-icon: clay-str-replace(
 	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$input-select-icon-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
 	'#',
@@ -1314,9 +1384,11 @@ $input-select-icon: clay-str-replace(
 ) !default;
 
 $input-select-icon-focus-color: null !default;
+
 $input-select-icon-focus: null !default;
 
 $input-select-icon-disabled-color: null !default;
+
 $input-select-icon-disabled: null !default;
 
 $input-select: () !default;
@@ -1332,16 +1404,20 @@ $input-select: map-deep-merge(
 		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,
+
 			option: (
 				cursor: $disabled-cursor,
 			),
 		),
+
 		option: (
 			cursor: $input-select-cursor,
 		),
@@ -1363,6 +1439,7 @@ $form-control-select: map-deep-merge(
 				text-align: left,
 				text-overflow: ellipsis,
 				white-space: nowrap,
+
 				hover: (
 					color: inherit,
 					text-decoration: none,
@@ -1384,6 +1461,7 @@ $form-control-select-sm: map-deep-merge(
 	(
 		height: $input-height-sm,
 		padding-right: 2em,
+
 		mobile: (
 			height: $input-height-sm-mobile,
 		),
@@ -1401,13 +1479,15 @@ $input-select-size: map-deep-merge(
 	(
 		background-image: none,
 		height: auto,
-		margin-left: 0,
+		margin-left: 0rem,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
 		scrollbar-width: thin,
+
 		focus: (
 			background-image: none,
 		),
+
 		option: (
 			padding: 0.25rem,
 		),
@@ -1438,6 +1518,7 @@ $input-group: map-deep-merge(
 		flex-wrap: wrap,
 		position: relative,
 		width: 100%,
+
 		btn-unstyled: (
 			color: inherit,
 		),
@@ -1474,7 +1555,7 @@ $input-group-text: map-deep-merge(
 		height: $input-height,
 		justify-content: center,
 		line-height: $input-line-height,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 		min-width: $input-group-addon-min-width,
 		padding-bottom: $input-group-addon-padding-y,
 		padding-left: $input-group-addon-padding-x,
@@ -1482,21 +1563,27 @@ $input-group-text: map-deep-merge(
 		padding-top: $input-group-addon-padding-y,
 		text-align: center,
 		white-space: nowrap,
+
 		label: (
 			color: $input-group-addon-color,
 		),
+
 		custom-control: (
-			margin-bottom: 0,
+			margin-bottom: 0rem,
 		),
+
 		form-check: (
-			margin-bottom: 0,
+			margin-bottom: 0rem,
+
 			input: (
-				margin-top: 0,
+				margin-top: 0rem,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				height: $input-height-mobile,
@@ -1521,6 +1608,7 @@ $input-group-text-secondary: map-deep-merge(
 		border-width: $input-group-secondary-addon-border-width,
 		color: $input-group-secondary-addon-color,
 		z-index: 2,
+
 		label: (
 			color: $input-group-secondary-addon-color,
 		),
@@ -1541,47 +1629,56 @@ $input-group-item: map-deep-merge(
 		margin-left: $input-group-item-margin-left,
 		width: 1%,
 		word-wrap: break-word,
+
 		after: (
 			border-radius: inherit,
-			bottom: 0,
+			bottom: 0rem,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0rem,
 			pointer-events: none,
 			position: absolute,
-			right: 0,
-			top: 0,
+			right: 0rem,
+			top: 0rem,
 			transition: clay-enable-transitions($input-transition),
 		),
+
 		focus: (
 			border-radius: clay-enable-rounded($input-border-radius),
 			after: (
 				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: 0,
+			margin-left: 0rem,
 		),
+
 		btn: (
 			align-self: flex-start,
 		),
+
 		dropdown: (
 			display: flex,
 			flex-wrap: wrap,
@@ -1615,13 +1712,15 @@ $input-group-item-focusable: map-deep-merge(
 			box-shadow: $input-focus-box-shadow,
 			outline: 0,
 			z-index: 1,
+
 			input-group-append: (
-				border-top-left-radius: 0,
-				border-bottom-left-radius: 0,
+				border-top-left-radius: 0rem,
+				border-bottom-left-radius: 0rem,
 			),
+
 			input-group-prepend: (
-				border-top-right-radius: 0,
-				border-bottom-right-radius: 0,
+				border-top-right-radius: 0rem,
+				border-bottom-right-radius: 0rem,
 			),
 		),
 	),
@@ -1644,18 +1743,20 @@ $input-group-inset-item-btn: map-deep-merge(
 		line-height: 1,
 		margin-left: 0.25rem,
 		margin-right: 0.25rem,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
-		padding-top: 0,
+		padding-top: 0rem,
+
 		c-inner: (
 			align-items: center,
 			display: flex,
 			height: 100%,
 			justify-content: center,
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$input-group-inset-item-btn
@@ -1666,9 +1767,9 @@ $input-group-inset-item-btn-monospaced: map-deep-merge(
 	(
 		font-size: 1rem,
 		height: 2rem,
-		margin-bottom: math-sign($input-border-bottom-width),
-		margin-top: math-sign($input-border-top-width),
-		padding: 0,
+		margin-bottom: calc(#{$input-border-bottom-width} * -1),
+		margin-top: calc(#{$input-border-top-width} * -1),
+		padding: 0rem,
 		width: 2rem,
 	),
 	$input-group-inset-item-btn-monospaced
@@ -1692,6 +1793,7 @@ $input-group-lg-item-btn: () !default; // .input-group-lg .input-group-item
 $input-group-lg-item-btn: map-deep-merge(
 	(
 		breakpoint-down: null,
+
 		font-size:
 			if(
 				variable-exists(btn-lg),
@@ -1724,6 +1826,7 @@ $input-group-lg-item-btn: map-deep-merge(
 					null
 				),
 		),
+
 		btn-section: (
 			font-size:
 				if(
@@ -1732,6 +1835,7 @@ $input-group-lg-item-btn: map-deep-merge(
 					0.8125rem
 				),
 		),
+
 		mobile: (
 			font-size:
 				if(
@@ -1772,6 +1876,7 @@ $input-group-lg-item-btn-monospaced: () !default;
 $input-group-lg-item-btn-monospaced: map-deep-merge(
 	(
 		breakpoint-down: null,
+
 		height:
 			if(
 				variable-exists(btn-monospaced-lg),
@@ -1835,12 +1940,13 @@ $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: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.75rem,
 		padding-right: 0.75rem,
-		padding-top: 0,
+		padding-top: 0rem,
 	),
 	$input-group-lg-inset-item-form-file-btn
 );
@@ -1851,6 +1957,7 @@ $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,
@@ -1862,10 +1969,12 @@ $input-group-lg: map-deep-merge(
 				padding-right: $input-padding-x-lg,
 				padding-top: $input-padding-y-lg,
 			),
+
 			form-control-inset: (
-				margin-bottom: 0,
-				margin-top: 0,
+				margin-bottom: 0rem,
+				margin-top: 0rem,
 			),
+
 			form-file: (
 				btn: (
 					border-radius: clay-enable-rounded($input-border-radius-lg),
@@ -1878,9 +1987,11 @@ $input-group-lg: map-deep-merge(
 					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,
@@ -1888,6 +1999,7 @@ $input-group-lg: map-deep-merge(
 				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,
@@ -1898,26 +2010,33 @@ $input-group-lg: map-deep-merge(
 				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,
 					),
@@ -1969,6 +2088,7 @@ $input-group-sm-item-btn: map-deep-merge(
 					null
 				),
 		),
+
 		btn-section: (
 			font-size:
 				if(
@@ -1977,6 +2097,7 @@ $input-group-sm-item-btn: map-deep-merge(
 					0.5625rem
 				),
 		),
+
 		mobile: (
 			font-size:
 				if(
@@ -2075,10 +2196,10 @@ $input-group-sm-inset-item-btn: () !default;
 $input-group-sm-inset-item-btn: map-deep-merge(
 	(
 		line-height: 1,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
-		padding-top: 0,
+		padding-top: 0rem,
 	),
 	$input-group-sm-inset-item-btn
 );
@@ -2099,10 +2220,10 @@ $input-group-sm-inset-item-form-file-btn: map-deep-merge(
 	(
 		height: 100%,
 		line-height: 1,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
-		padding-top: 0,
+		padding-top: 0rem,
 	),
 	$input-group-sm-inset-item-form-file-btn
 );
@@ -2112,7 +2233,9 @@ $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),
@@ -2125,6 +2248,7 @@ $input-group-sm: map-deep-merge(
 					padding-top: $input-padding-y-sm,
 				),
 			),
+
 			form-control-plaintext: (
 				font-size: $input-font-size-sm,
 				height: $input-height-sm,
@@ -2132,9 +2256,11 @@ $input-group-sm: map-deep-merge(
 				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,
@@ -2145,26 +2271,32 @@ $input-group-sm: map-deep-merge(
 				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,
 					),
@@ -2183,13 +2315,16 @@ $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,
@@ -2211,6 +2346,7 @@ $input-group-inset-readonly: map-deep-merge(
 			color: $input-readonly-color,
 			cursor: $input-readonly-cursor,
 		),
+
 		focus: (
 			input-group-inset-item: (
 				background-color: $input-readonly-focus-bg,
@@ -2228,10 +2364,12 @@ $input-group-stacked-sm-down: () !default;
 $input-group-stacked-sm-down: map-deep-merge(
 	(
 		breakpoint: sm,
+
 		input-group-item: (
 			margin-bottom: 0.5rem,
-			margin-left: 0,
+			margin-left: 0rem,
 		),
+
 		input-group-item-shrink: (
 			margin-right: 0.5rem,
 		),