$cadmin-custom-forms-transition:
	background-color 0.15s ease-in-out,
	border-color 0.15s ease-in-out,
	box-shadow 0.15s ease-in-out !default;

// Form File

$cadmin-form-file: () !default;
$cadmin-form-file: map-deep-merge(
	(
		border-radius: clay-enable-rounded($cadmin-input-border-radius),
		display: flex,
		position: relative,
		transition: clay-enable-transitions($cadmin-input-transition),
		focus-within: (
			background-color: $cadmin-input-focus-bg,
			box-shadow: $cadmin-input-focus-box-shadow,
			outline: 0,
			z-index: 1,
		),
	),
	$cadmin-form-file
);

// Custom Control Indicator

$cadmin-custom-control-indicator-size: 16px !default;

$cadmin-custom-control-indicator-bg: $cadmin-white !default;
$cadmin-custom-control-indicator-bg-size: 8px 8px !default;
$cadmin-custom-control-indicator-border-color: $cadmin-gray-600 !default;
$cadmin-custom-control-indicator-border-style: solid !default;
$cadmin-custom-control-indicator-border-width: 1px !default; // 1px
$cadmin-custom-control-indicator-box-shadow: none !default;
$cadmin-custom-control-indicator-position-top: 0 !default;

$cadmin-custom-control-indicator-focus-border-color: $cadmin-custom-control-indicator-border-color !default;
$cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-shadow !default;

$cadmin-custom-control-indicator-active-bg: $cadmin-white !default;
$cadmin-custom-control-indicator-active-box-shadow: c-unset !default;
$cadmin-custom-control-indicator-active-border-color: $cadmin-custom-control-indicator-border-color !default;
$cadmin-custom-control-indicator-active-color: $cadmin-component-active-color !default;

$cadmin-custom-control-indicator-disabled-bg: $cadmin-input-disabled-bg !default;
$cadmin-custom-control-indicator-disabled-border-color: $cadmin-secondary-l3 !default;
$cadmin-custom-control-indicator-disabled-cursor: $cadmin-disabled-cursor !default;

// Custom Control Indicator Checked

$cadmin-custom-control-indicator-checked-bg: $cadmin-component-active-bg !default;
$cadmin-custom-control-indicator-checked-color: $cadmin-component-active-color !default;
$cadmin-custom-control-indicator-checked-border-color: $cadmin-custom-control-indicator-checked-bg !default;
$cadmin-custom-control-indicator-checked-box-shadow: null !default;

// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-bg` instead

$cadmin-custom-control-indicator-active-checked-bg: $cadmin-component-active-bg !default;
$cadmin-custom-control-indicator-checked-active-bg: $cadmin-custom-control-indicator-active-checked-bg !default;

// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-border-color` instead

$cadmin-custom-control-indicator-active-checked-border-color: $cadmin-custom-control-indicator-checked-active-bg !default;
$cadmin-custom-control-indicator-checked-active-border-color: $cadmin-custom-control-indicator-active-checked-border-color !default;

// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-bg` instead

$cadmin-custom-control-indicator-disabled-checked-bg: clay-lighten(
	$cadmin-component-active-bg,
	32.94
) !default;
$cadmin-custom-control-indicator-checked-disabled-bg: $cadmin-custom-control-indicator-disabled-checked-bg !default;

// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-border-color` instead

$cadmin-custom-control-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-bg !default;
$cadmin-custom-control-indicator-checked-disabled-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default;

// Custom Control

$cadmin-custom-control-cursor: null !default;
$cadmin-custom-control-gutter: 8px !default;
$cadmin-custom-control-spacer-x: 16px !default;

// @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead

$cadmin-custom-control-margin-bottom: 8px !default;

// @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead

$cadmin-custom-control-margin-top: null !default;

// @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead

$cadmin-custom-control-min-height: 24px !default;

// .custom-control-label

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead

$cadmin-custom-control-description-cursor: $cadmin-form-check-label-cursor !default;

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead

$cadmin-custom-control-description-font-size: $cadmin-input-label-font-size !default; // 13px

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead

$cadmin-custom-control-description-font-weight: $cadmin-font-weight-normal !default;

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead

$cadmin-custom-control-description-line-height: $cadmin-custom-control-min-height !default;

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label-text` instead

$cadmin-custom-control-description-padding-left: 8px !default; // 8px

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label-disabled` instead

$cadmin-custom-control-description-disabled-cursor: $cadmin-disabled-cursor !default;

// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label-text-small` instead

$cadmin-custom-control-description-small-font-size: 100% !default;

$cadmin-custom-control-label-color: null !default;

$cadmin-custom-control-label: () !default;
$cadmin-custom-control-label: map-deep-merge(
	(
		color: $cadmin-custom-control-label-color,
		cursor: $cadmin-custom-control-description-cursor,
		font-size: $cadmin-custom-control-description-font-size,
		font-weight: $cadmin-custom-control-description-font-weight,
		line-height: $cadmin-custom-control-description-line-height,
		margin-bottom: 0,
		position: static,
		vertical-align: top,
		before: (
			background-color: $cadmin-custom-control-indicator-bg,
			border-color: $cadmin-custom-control-indicator-border-color,
			border-style: $cadmin-custom-control-indicator-border-style,
			border-width: $cadmin-custom-control-indicator-border-width,
			box-shadow:
				clay-enable-shadows($cadmin-custom-control-indicator-box-shadow),
			content: '',
			display: block,
			float: left,
			font-size: $cadmin-custom-control-indicator-size,
			height: $cadmin-custom-control-indicator-size,
			left: 0,
			position: relative,
			top: 4px,
			transition: clay-enable-transitions($cadmin-custom-forms-transition),
			width: $cadmin-custom-control-indicator-size,
			z-index: 0,
		),
		after: (
			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
			border-radius: $cadmin-rounded-circle-border-radius,
			content: '',
			display: block,
			height: 24px,
			left: -4px,
			position: absolute,
			top: $cadmin-custom-control-indicator-position-top,
			width: 24px,
			z-index: 0,
		),
	),
	$cadmin-custom-control-label
);

$cadmin-custom-control-label-disabled-color: $cadmin-input-label-disabled-color !default;

$cadmin-custom-control-label-disabled: () !default;
$cadmin-custom-control-label-disabled: map-deep-merge(
	(
		color: $cadmin-custom-control-label-disabled-color,
		cursor: $cadmin-custom-control-description-disabled-cursor,
		before: (
			background-color: $cadmin-custom-control-indicator-disabled-bg,
			border-color: $cadmin-custom-control-indicator-disabled-border-color,
			box-shadow: none,
		),
	),
	$cadmin-custom-control-label-disabled
);

// label.custom-control-label

$cadmin-label-custom-control-label: () !default;
$cadmin-label-custom-control-label: map-deep-merge(
	(
		font-size: map-get($cadmin-custom-control-label, font-size),
	),
	$cadmin-label-custom-control-label
);

// .custom-control-label-text

$cadmin-custom-control-label-text: () !default;
$cadmin-custom-control-label-text: map-deep-merge(
	(
		padding-left: $cadmin-custom-control-description-padding-left,
	),
	$cadmin-custom-control-label-text
);

// .custom-control-label-text small, .custom-control-label-text .small

$cadmin-custom-control-label-text-small: () !default;
$cadmin-custom-control-label-text-small: map-merge(
	(
		font-size: $cadmin-custom-control-description-small-font-size,
	),
	$cadmin-custom-control-label-text-small
);

$cadmin-custom-control: () !default;
$cadmin-custom-control: map-deep-merge(
	(
		cursor: $cadmin-custom-control-cursor,
		display: block,
		line-height: 1,
		margin-bottom: $cadmin-custom-control-margin-bottom,
		margin-top: $cadmin-custom-control-margin-top,
		min-height: $cadmin-custom-control-min-height,
		position: relative,
		text-align: left,
		only-child: (
			margin-bottom: 0,
		),
		label: (
			cursor: map-get($cadmin-custom-control-label, cursor),
			display: inline,
			font-size: $cadmin-font-size-base,
			margin-bottom: 0,
			position: static,
		),
	),
	$cadmin-custom-control
);

// .custom-control-input

$cadmin-custom-control-input: () !default;
$cadmin-custom-control-input: map-deep-merge(
	(
		cursor: $cadmin-form-check-input-cursor,
		height: 24px,
		left: -4px,
		opacity: 0,
		position: absolute,
		top: $cadmin-custom-control-indicator-position-top,
		width: 24px,
		z-index: 1,
		focus: (
			custom-control-label: (
				before: (
					border-color:
						$cadmin-custom-control-indicator-focus-border-color,
				),
				after: (
					box-shadow:
						$cadmin-custom-control-indicator-focus-box-shadow,
				),
			),
		),
		active: (
			custom-control-label: (
				before: (
					background-color: $cadmin-custom-control-indicator-active-bg,
					border-color:
						$cadmin-custom-control-indicator-active-border-color,
					box-shadow:
						$cadmin-custom-control-indicator-active-box-shadow,
					color: $cadmin-custom-control-indicator-active-color,
				),
			),
		),
		disabled: (
			cursor: $cadmin-custom-control-indicator-disabled-cursor,
			custom-control-label: $cadmin-custom-control-label-disabled,
		),
		readonly: (
			custom-control-label: (
				color: $cadmin-gray-900,
				before: (
					background-color: $cadmin-gray-200,
					border-color: $cadmin-secondary-l3,
				),
			),
			disabled: (
				custom-control-label: (
					color: $cadmin-custom-control-label-disabled-color,
				),
			),
		),
		checked: (
			custom-control-label: (
				before: (
					background-color:
						$cadmin-custom-control-indicator-checked-bg,
					border-color:
						$cadmin-custom-control-indicator-checked-border-color,
					box-shadow:
						clay-enable-shadows(
							$cadmin-custom-control-indicator-checked-box-shadow
						),
					color: $cadmin-custom-control-indicator-checked-color,
				),
			),
			active: (
				custom-control-label: (
					before: (
						background-color:
							$cadmin-custom-control-indicator-checked-active-bg,
						border-color:
							$cadmin-custom-control-indicator-checked-active-border-color,
					),
				),
			),
			disabled: (
				custom-control-label: (
					before: (
						background-color:
							$cadmin-custom-control-indicator-checked-disabled-bg,
						border-color:
							$cadmin-custom-control-indicator-checked-disabled-border-color,
					),
				),
			),
		),
	),
	$cadmin-custom-control-input
);

// Custom Control Primary

$cadmin-custom-control-primary-label-text: () !default;
$cadmin-custom-control-primary-label-text: map-merge(
	(
		font-weight: $cadmin-font-weight-semi-bold,
	),
	$cadmin-custom-control-primary-label-text
);

// .custom-checkbox

$cadmin-custom-checkbox-indicator-border-radius: 2px !default; // 2px

$cadmin-custom-checkbox-indicator-icon-checked: clay-icon(
	check-small,
	$cadmin-white
) !default;
$cadmin-custom-checkbox-indicator-icon-checked-bg-size: 16px !default;

$cadmin-custom-checkbox-indicator-indeterminate-bg: $cadmin-component-active-bg !default;
$cadmin-custom-checkbox-indicator-indeterminate-border-color: $cadmin-custom-checkbox-indicator-indeterminate-bg !default;

$cadmin-custom-control-indicator-indeterminate-border-color: $cadmin-custom-control-indicator-checked-active-bg !default;

$cadmin-custom-checkbox-indicator-indeterminate-box-shadow: null !default;
$cadmin-custom-checkbox-indicator-indeterminate-color: $cadmin-custom-control-indicator-checked-color !default;

$cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
	hr,
	$cadmin-custom-checkbox-indicator-indeterminate-color
) !default;
$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 16px !default;

$cadmin-custom-checkbox: () !default;
$cadmin-custom-checkbox: map-deep-merge(
	(
		custom-control-input: (
			custom-control-label: (
				before: (
					border-radius:
						clay-enable-rounded(
							$cadmin-custom-checkbox-indicator-border-radius
						),
				),
			),
			checked: (
				custom-control-label: (
					after: (
						background-image:
							$cadmin-custom-checkbox-indicator-icon-checked,
						background-size:
							$cadmin-custom-checkbox-indicator-icon-checked-bg-size,
					),
				),
				disabled: (
					custom-control-label: (
						before: (
							background-color:
								$cadmin-custom-control-indicator-checked-disabled-bg,
						),
					),
				),
				readonly: (
					custom-control-label: (
						before: (
							background-color: $cadmin-white,
							border-color: $cadmin-secondary-l2,
						),
						after: (
							background-image:
								clay-icon(check-small, $cadmin-secondary),
						),
					),
					disabled: (
						custom-control-label: (
							before: (
								opacity: 0.4,
							),
							after: (
								opacity: 0.4,
							),
						),
					),
				),
			),
			indeterminate: (
				custom-control-label: (
					before: (
						background-color:
							$cadmin-custom-checkbox-indicator-indeterminate-bg,
						border-color:
							$cadmin-custom-control-indicator-indeterminate-border-color,
						box-shadow:
							clay-enable-shadows(
								$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
							),
					),
					after: (
						background-image:
							$cadmin-custom-checkbox-indicator-icon-indeterminate,
						background-size:
							$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size,
					),
				),
				disabled: (
					custom-control-label: (
						before: (
							background-color:
								$cadmin-custom-control-indicator-checked-disabled-bg,
							border-color:
								$cadmin-custom-control-indicator-checked-disabled-border-color,
						),
					),
				),
				readonly: (
					custom-control-label: (
						before: (
							background-color: $cadmin-white,
							border-color: $cadmin-secondary-l2,
						),
						after: (
							background-image: clay-icon(hr, $cadmin-secondary),
						),
					),
					disabled: (
						custom-control-label: (
							before: (
								opacity: 0.4,
							),
							after: (
								opacity: 0.4,
							),
						),
					),
				),
			),
		),
	),
	$cadmin-custom-checkbox
);

// .custom-radio

$cadmin-custom-radio-indicator-border-radius: 50% !default;

$cadmin-custom-radio-indicator-icon-checked: clay-icon(
	circle,
	$cadmin-white
) !default;
$cadmin-custom-radio-indicator-icon-checked-bg-size: 8px !default;

$cadmin-custom-radio-indicator-disabled-border-color: $cadmin-custom-control-indicator-disabled-bg !default;

// @deprecated as of v2.2.1 use `$cadmin-custom-radio-indicator-checked-disabled-border-color` instead

$cadmin-custom-radio-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default;
$cadmin-custom-radio-indicator-checked-disabled-border-color: $cadmin-custom-radio-indicator-disabled-checked-border-color !default;

$cadmin-custom-radio: () !default;
$cadmin-custom-radio: map-deep-merge(
	(
		custom-control-input: (
			custom-control-label: (
				before: (
					border-radius: $cadmin-custom-radio-indicator-border-radius,
				),
			),
			disabled: (
				custom-control-label: (
					before: (
						border-color:
							$cadmin-custom-radio-indicator-disabled-border-color,
					),
				),
			),
			checked: (
				custom-control-label: (
					after: (
						background-image:
							$cadmin-custom-radio-indicator-icon-checked,
						background-size:
							$cadmin-custom-radio-indicator-icon-checked-bg-size,
					),
				),
				disabled: (
					custom-control-label: (
						before: (
							background-color:
								$cadmin-custom-control-indicator-checked-disabled-bg,
							border-color:
								$cadmin-custom-radio-indicator-checked-disabled-border-color,
						),
					),
				),
			),
		),
	),
	$cadmin-custom-radio
);

$cadmin-custom-control-outside: () !default;
$cadmin-custom-control-outside: map-deep-merge(
	(
		label: (
			display: inline-block,
			padding-left:
				calc(
					#{$cadmin-custom-control-indicator-size} + #{$cadmin-custom-control-description-padding-left}
				),
		),
		custom-control-input: (
			custom-control-label: (
				before: (
					position: absolute,
				),
			),
		),
		custom-control-label-text: (
			padding-left: 0,
		),
	),
	$cadmin-custom-control-outside
);