@clayui/css 3.161.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_date-picker.scss

@@ -1,701 +1,619 @@
-@if ($enable-atlas-custom-properties) {
-	// Date Picker Dropdown Menu
-
-	$date-picker-dropdown-menu: ();
-	$date-picker-dropdown-menu: map-deep-merge(
-		(
-			max-height: var(--date-picker-dropdown-menu-max-height, none),
-			max-width: var(--date-picker-dropdown-menu-max-width, 352px),
-			padding-bottom: var(--date-picker-dropdown-menu-padding-bottom, 0),
-			padding-left: var(--date-picker-dropdown-menu-padding-left, 0),
-			padding-right: var(--date-picker-dropdown-menu-padding-right, 0),
-			padding-top: var(--date-picker-dropdown-menu-padding-top, 0),
-			width: var(--date-picker-dropdown-menu-width, 100%),
-			media-breakpoint-down: (
-				xs: (
-					font-size:
-						var(
-							--date-picker-dropdown-menu-xs-down-font-size,
-							12px
-						),
-					margin: var(--date-picker-dropdown-menu-xs-down-margin, 0),
-					max-height:
-						var(
-							--date-picker-dropdown-menu-xs-down-max-height,
-							255px
-						),
-					max-width:
-						var(
-							--date-picker-dropdown-menu-xs-down-max-width,
-							264px
-						),
-				),
+// Date Picker Dropdown Menu
+
+$date-picker-dropdown-menu: () !default;
+$date-picker-dropdown-menu: map-deep-merge(
+	(
+		max-height: var(--date-picker-dropdown-menu-max-height, none),
+		max-width: var(--date-picker-dropdown-menu-max-width, 352px),
+		padding-bottom: var(--date-picker-dropdown-menu-padding-bottom, 0),
+		padding-left: var(--date-picker-dropdown-menu-padding-left, 0),
+		padding-right: var(--date-picker-dropdown-menu-padding-right, 0),
+		padding-top: var(--date-picker-dropdown-menu-padding-top, 0),
+		width: var(--date-picker-dropdown-menu-width, 100%),
+		media-breakpoint-down: (
+			xs: (
+				font-size:
+					var(--date-picker-dropdown-menu-xs-down-font-size, 12px),
+				margin: var(--date-picker-dropdown-menu-xs-down-margin, 0),
+				max-height:
+					var(--date-picker-dropdown-menu-xs-down-max-height, 255px),
+				max-width:
+					var(--date-picker-dropdown-menu-xs-down-max-width, 264px),
 			),
 		),
-		$date-picker-dropdown-menu
-	);
+	),
+	$date-picker-dropdown-menu
+);
+
+// Date Picker Nav
+
+$date-picker-nav-row: () !default;
+$date-picker-nav-row: map-deep-merge(
+	(
+		display: flex,
+		margin-left: var(--date-picker-nav-row-margin-left, -2px),
+		margin-right: var(--date-picker-nav-row-margin-right, -2px),
+	),
+	$date-picker-nav-row
+);
+
+$date-picker-nav-btn: () !default;
+$date-picker-nav-btn: map-deep-merge(
+	(
+		color: var(--date-picker-nav-btn-color, $gray-600),
+		transition: var(--date-picker-nav-btn-transition, $component-transition),
+		hover: (
+			background-color:
+				var(--date-picker-nav-btn-hover-background-color, $gray-200),
+			color: var(--date-picker-nav-btn-hover-color, $gray-900),
+		),
 
-	// Date Picker Nav
+		focus: (
+			background-color:
+				var(--date-picker-nav-btn-focus-background-color, $gray-200),
+			box-shadow:
+				var(
+					--date-picker-nav-btn-focus-box-shadow,
+					$component-focus-box-shadow
+				),
+			color: var(--date-picker-nav-btn-focus-color, $gray-900),
+		),
+
+		active: (
+			background-color:
+				var(--date-picker-nav-btn-active-active, $gray-200),
+		),
 
-	$date-picker-nav-row: ();
-	$date-picker-nav-row: map-deep-merge(
-		(
-			display: flex,
-			margin-left: var(--date-picker-nav-row-margin-left, -2px),
-			margin-right: var(--date-picker-nav-row-margin-right, -2px),
+		disabled: (
+			background-color:
+				var(
+					--date-picker-nav-btn-disabled-background-color,
+					transparent
+				),
+			box-shadow: var(--date-picker-nav-btn-disabled-box-shadow, none),
+			color: var(--date-picker-nav-btn-disabled-color, $gray-500),
 		),
-		$date-picker-nav-row
-	);
-
-	$date-picker-nav-btn: ();
-	$date-picker-nav-btn: map-deep-merge(
-		(
-			color: var(--date-picker-nav-btn-color, $gray-600),
-			transition:
-				var(--date-picker-nav-btn-transition, $component-transition),
-			hover: (
-				background-color:
+	),
+	$date-picker-nav-btn
+);
+
+$date-picker-nav-btn-monospaced: () !default;
+$date-picker-nav-btn-monospaced: map-deep-merge(
+	(
+		margin-bottom: var(--date-picker-nav-btn-monospaced-margin-bottom, 0),
+		margin-left: var(--date-picker-nav-btn-monospaced-margin-left, 2px),
+		margin-right: var(--date-picker-nav-btn-monospaced-margin-right, 2px),
+		margin-top: var(--date-picker-nav-btn-monospaced-margin-top, 0),
+		media-breakpoint-down: (
+			xs: (
+				font-size:
 					var(
-						--date-picker-nav-btn-hover-background-color,
-						$gray-200
+						--date-picker-nav-btn-monospaced-xs-down-font-size,
+						12px
 					),
-				color: var(--date-picker-nav-btn-hover-color, $gray-900),
-			),
-
-			focus: (
-				background-color:
+				height:
+					var(--date-picker-nav-btn-monospaced-xs-down-height, 24px),
+				max-height:
 					var(
-						--date-picker-nav-btn-focus-background-color,
-						$gray-200
+						--date-picker-nav-btn-monospaced-xs-down-max-height,
+						24px
 					),
-				box-shadow:
+				max-width:
 					var(
-						--date-picker-nav-btn-focus-box-shadow,
-						$component-focus-box-shadow
+						--date-picker-nav-btn-monospaced-xs-down-max-width,
+						24px
 					),
-				color: var(--date-picker-nav-btn-focus-color, $gray-900),
-			),
-
-			active: (
-				background-color:
-					var(--date-picker-nav-btn-active-active, $gray-200),
-			),
-
-			disabled: (
-				background-color:
+				min-width:
 					var(
-						--date-picker-nav-btn-disabled-background-color,
-						transparent
+						--date-picker-nav-btn-monospaced-xs-down-min-width,
+						24px
 					),
-				box-shadow:
-					var(--date-picker-nav-btn-disabled-box-shadow, none),
-				color: var(--date-picker-nav-btn-disabled-color, $gray-500),
 			),
 		),
-		$date-picker-nav-btn
-	);
-
-	$date-picker-nav-btn-monospaced: ();
-	$date-picker-nav-btn-monospaced: map-deep-merge(
-		(
-			margin-bottom:
-				var(--date-picker-nav-btn-monospaced-margin-bottom, 0),
-			margin-left: var(--date-picker-nav-btn-monospaced-margin-left, 2px),
-			margin-right:
-				var(--date-picker-nav-btn-monospaced-margin-right, 2px),
-			margin-top: var(--date-picker-nav-btn-monospaced-margin-top, 0),
-			media-breakpoint-down: (
-				xs: (
-					font-size:
-						var(
-							--date-picker-nav-btn-monospaced-xs-down-font-size,
-							12px
-						),
-					height:
-						var(
-							--date-picker-nav-btn-monospaced-xs-down-height,
-							24px
-						),
-					max-height:
-						var(
-							--date-picker-nav-btn-monospaced-xs-down-max-height,
-							24px
-						),
-					max-width:
-						var(
-							--date-picker-nav-btn-monospaced-xs-down-max-width,
-							24px
-						),
-					min-width:
-						var(
-							--date-picker-nav-btn-monospaced-xs-down-min-width,
-							24px
-						),
-				),
-			),
+	),
+	$date-picker-nav-btn-monospaced
+);
+
+$date-picker-nav-select: () !default;
+$date-picker-nav-select: map-deep-merge(
+	(
+		background-color:
+			var(--date-picker-nav-select-background-color, transparent),
+		border-color: var(--date-picker-nav-select-border-color, transparent),
+		color: var(--date-picker-nav-select-color, $secondary),
+		font-size: var(--date-picker-nav-select-font-size, $font-size-sm),
+		font-weight:
+			var(--date-picker-nav-select-font-weight, $font-weight-semi-bold),
+		height: var(--date-picker-nav-select-height, $input-height-sm),
+		padding-bottom: var(--date-picker-nav-select-padding-bottom, 0),
+		padding-left: var(--date-picker-nav-select-padding-left, 8px),
+		padding-top: var(--date-picker-nav-select-padding-top, 0),
+		hover: (
+			background-color:
+				var(--date-picker-nav-select-hover-background-color, $gray-200),
+			color: var(--date-picker-nav-select-hover-color, $gray-900),
 		),
-		$date-picker-nav-btn-monospaced
-	);
 
-	$date-picker-nav-select: ();
-	$date-picker-nav-select: map-deep-merge(
-		(
+		focus: (
+			background-color:
+				var(--date-picker-nav-select-focus-background-color, $gray-200),
+			color: var(--date-picker-nav-select-focus-color, $gray-900),
+		),
+
+		disabled: (
 			background-color:
-				var(--date-picker-nav-select-background-color, transparent),
-			border-color:
-				var(--date-picker-nav-select-border-color, transparent),
-			color: var(--date-picker-nav-select-color, $secondary),
-			font-size: var(--date-picker-nav-select-font-size, $font-size-sm),
-			font-weight:
 				var(
-					--date-picker-nav-select-font-weight,
-					$font-weight-semi-bold
+					--date-picker-nav-select-disabled-background-color,
+					transparent
 				),
-			height: var(--date-picker-nav-select-height, $input-height-sm),
-			padding-bottom: var(--date-picker-nav-select-padding-bottom, 0),
-			padding-left: var(--date-picker-nav-select-padding-left, 8px),
-			padding-top: var(--date-picker-nav-select-padding-top, 0),
-			hover: (
-				background-color:
-					var(
-						--date-picker-nav-select-hover-background-color,
-						$gray-200
-					),
-				color: var(--date-picker-nav-select-hover-color, $gray-900),
-			),
+			color:
+				var(
+					--date-picker-nav-select-disabled-color,
+					$input-disabled-color
+				),
+		),
 
-			focus: (
-				background-color:
-					var(
-						--date-picker-nav-select-focus-background-color,
-						$gray-200
-					),
-				color: var(--date-picker-nav-select-focus-color, $gray-900),
+		media-breakpoint-down: (
+			xs: (
+				font-size: var(--date-picker-nav-select-xs-down-font-size, 12px),
+				height: var(--date-picker-nav-select-xs-down-height, 24px),
 			),
-
-			disabled: (
-				background-color:
-					var(
-						--date-picker-nav-select-disabled-background-color,
-						transparent
-					),
-				color:
-					var(
-						--date-picker-nav-select-disabled-color,
-						$input-disabled-color
-					),
+		),
+	),
+	$date-picker-nav-select
+);
+
+// Date Picker Row
+
+$date-picker-row: () !default;
+$date-picker-row: map-deep-merge(
+	(
+		display: flex,
+		justify-content: space-between,
+		list-style: none,
+		margin-bottom: var(--date-picker-row-margin-bottom, 8px),
+		margin-top: var(--date-picker-row-margin-top, 8px),
+		padding: var(--date-picker-row-padding, 0),
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: var(--date-picker-row-xs-down-margin-bottom, 4px),
+				margin-top: var(--date-picker-row-xs-down-margin-top, 4px),
 			),
+		),
+	),
+	$date-picker-row
+);
+
+$date-picker-col: () !default;
+$date-picker-col: map-deep-merge(
+	(
+		display: flex,
+		flex-grow: 1,
+		justify-content: center,
+
+		c-selected: (
+			background-image:
+				var(
+					--date-picker-col-c-selected-background-image,
+					linear-gradient($primary-l3, $primary-l3)
+				),
+			background-repeat:
+				var(--date-picker-col-c-selected-background-repeat, no-repeat),
+		),
 
-			media-breakpoint-down: (
-				xs: (
-					font-size:
-						var(--date-picker-nav-select-xs-down-font-size, 12px),
-					height: var(--date-picker-nav-select-xs-down-height, 24px),
+		c-selected-first-child: (
+			border-bottom-left-radius:
+				var(
+					--date-picker-col-c-selected-first-child-border-bottom-left-radius,
+					100px
+				),
+			border-top-left-radius:
+				var(
+					--date-picker-col-c-selected-first-child-border-top-left-radius,
+					100px
+				),
+		),
+
+		c-selected-last-child: (
+			border-bottom-right-radius:
+				var(
+					--date-picker-col-c-selected-last-child-border-bottom-right-radius,
+					100px
+				),
+			border-top-right-radius:
+				var(
+					--date-picker-col-c-selected-last-child-border-top-right-radius,
+					100px
 				),
-			),
 		),
-		$date-picker-nav-select
-	);
-
-	// Date Picker Row
-
-	$date-picker-row: ();
-	$date-picker-row: map-deep-merge(
-		(
-			display: flex,
-			justify-content: space-between,
-			list-style: none,
-			margin-bottom: var(--date-picker-row-margin-bottom, 8px),
-			margin-top: var(--date-picker-row-margin-top, 8px),
-			padding: var(--date-picker-row-padding, 0),
-			media-breakpoint-down: (
-				xs: (
-					margin-bottom:
-						var(--date-picker-row-xs-down-margin-bottom, 4px),
-					margin-top: var(--date-picker-row-xs-down-margin-top, 4px),
+
+		c-selected-start: (
+			background-position:
+				var(
+					--date-picker-col-c-selected-start-background-position,
+					right top
+				),
+			background-size:
+				var(
+					--date-picker-col-c-selected-start-background-size,
+					50% 100%
+				),
+		),
+
+		c-selected-end: (
+			background-position:
+				var(
+					--date-picker-col-c-selected-end-background-position,
+					left top
 				),
+			background-size:
+				var(--date-picker-col-c-selected-end-background-size, 50% 100%),
+		),
+	),
+	$date-picker-col
+);
+
+$date-picker-days-row: () !default;
+$date-picker-days-row: map-deep-merge(
+	(
+		margin-bottom: var(--date-picker-days-row-margin-bottom, 16px),
+		margin-top: var(--date-picker-days-row-margin-top, 0),
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom:
+					var(--date-picker-days-row-xs-down-margin-bottom, 4px),
 			),
 		),
-		$date-picker-row
-	);
-
-	$date-picker-col: ();
-	$date-picker-col: map-deep-merge(
-		(
-			display: flex,
-			flex-grow: 1,
-			justify-content: center,
-
-			c-selected: (
-				background-image:
+	),
+	$date-picker-days-row
+);
+
+$date-picker-date-row: () !default;
+
+// Date Picker Day
+
+$date-picker-day: () !default;
+$date-picker-day: map-deep-merge(
+	(
+		height: var(--date-picker-day-height, 21px),
+	),
+	$date-picker-day
+);
+
+// Date Picker Calendar
+
+$date-picker-calendar-container: () !default;
+$date-picker-calendar-container: map-merge(
+	(
+		float: left,
+		min-width: 100%,
+	),
+	$date-picker-calendar-container
+);
+
+$date-picker-calendar-header-container: () !default;
+$date-picker-calendar-header-container: map-merge(
+	(
+		padding-bottom:
+			var(--date-picker-calendar-header-container-padding-bottom, 16px),
+		padding-left:
+			var(--date-picker-calendar-header-container-padding-left, 16px),
+		padding-right:
+			var(--date-picker-calendar-header-container-padding-right, 16px),
+		padding-top:
+			var(--date-picker-calendar-header-container-padding-top, 16px),
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom:
 					var(
-						--date-picker-col-c-selected-background-image,
-						linear-gradient($primary-l3, $primary-l3)
+						--date-picker-calendar-header-container-xs-down-padding-bottom,
+						4px
 					),
-				background-repeat:
+				padding-left:
 					var(
-						--date-picker-col-c-selected-background-repeat,
-						no-repeat
+						--date-picker-calendar-header-container-xs-down-padding-left,
+						6px
 					),
-			),
-
-			c-selected-first-child: (
-				border-bottom-left-radius:
+				padding-right:
 					var(
-						--date-picker-col-c-selected-first-child-border-bottom-left-radius,
-						100px
+						--date-picker-calendar-header-container-xs-down-padding-right,
+						6px
 					),
-				border-top-left-radius:
+				padding-top:
 					var(
-						--date-picker-col-c-selected-first-child-border-top-left-radius,
-						100px
+						--date-picker-calendar-header-container-xs-down-padding-top,
+						8px
 					),
 			),
-
-			c-selected-last-child: (
-				border-bottom-right-radius:
+		),
+	),
+	$date-picker-calendar-header-container
+);
+
+$date-picker-calendar-body-container: () !default;
+$date-picker-calendar-body-container: map-merge(
+	(
+		padding-bottom:
+			var(--date-picker-calendar-body-container-padding-bottom, 8px),
+		padding-left:
+			var(--date-picker-calendar-body-container-padding-left, 8px),
+		padding-right:
+			var(--date-picker-calendar-body-container-padding-right, 8px),
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom:
 					var(
-						--date-picker-col-c-selected-last-child-border-bottom-right-radius,
-						100px
+						--date-picker-calendar-body-container-xs-down-padding-bottom,
+						4px
 					),
-				border-top-right-radius:
+				padding-left:
 					var(
-						--date-picker-col-c-selected-last-child-border-top-right-radius,
-						100px
+						--date-picker-calendar-body-container-xs-down-padding-left,
+						6px
 					),
-			),
-
-			c-selected-start: (
-				background-position:
+				padding-right:
 					var(
-						--date-picker-col-c-selected-start-background-position,
-						right top
+						--date-picker-calendar-body-container-xs-down-padding-right,
+						6px
 					),
-				background-size:
+			),
+		),
+	),
+	$date-picker-calendar-body-container
+);
+
+$date-picker-calendar-footer-container: () !default;
+$date-picker-calendar-footer-container: map-merge(
+	(
+		border-color:
+			var(--date-picker-calendar-footer-container-border-color, $gray-400),
+		border-style:
+			var(--date-picker-calendar-footer-container-border-style, solid),
+		border-width:
+			var(--date-picker-calendar-footer-container-border-width, 1px 0 0 0),
+		padding-bottom:
+			var(--date-picker-calendar-footer-container-padding-bottom, 8px),
+		padding-left:
+			var(--date-picker-calendar-footer-container-padding-left, 14px),
+		padding-right:
+			var(--date-picker-calendar-footer-container-padding-right, 14px),
+		padding-top:
+			var(--date-picker-calendar-footer-container-padding-top, 8px),
+		media-breakpoint-down: (
+			xs: (
+				padding-left:
 					var(
-						--date-picker-col-c-selected-start-background-size,
-						50% 100%
+						--date-picker-calendar-footer-container-xs-down-padding-left,
+						6px
 					),
-			),
-
-			c-selected-end: (
-				background-position:
+				padding-right:
 					var(
-						--date-picker-col-c-selected-end-background-position,
-						left top
+						--date-picker-calendar-footer-container-xs-down-padding-right,
+						6px
 					),
-				background-size:
+				padding-top:
 					var(
-						--date-picker-col-c-selected-end-background-size,
-						50% 100%
+						--date-picker-calendar-footer-container-xs-down-padding-top,
+						7px
 					),
 			),
 		),
-		$date-picker-col
-	);
-
-	$date-picker-days-row: ();
-	$date-picker-days-row: map-deep-merge(
-		(
-			margin-bottom: var(--date-picker-days-row-margin-bottom, 16px),
-			margin-top: var(--date-picker-days-row-margin-top, 0),
-			media-breakpoint-down: (
-				xs: (
-					margin-bottom:
-						var(--date-picker-days-row-xs-down-margin-bottom, 4px),
-				),
+	),
+	$date-picker-calendar-footer-container
+);
+
+// Date Picker Calendar Item
+
+$date-picker-calendar-item: () !default;
+$date-picker-calendar-item: map-deep-merge(
+	(
+		align-items: center,
+		background-color:
+			var(
+				--date-picker-calendar-item-background-color,
+				setter(map-get($date-picker-calendar-item, bg), transparent)
+			),
+		border-width: var(--date-picker-calendar-item-border-width, 0),
+		disabled-cursor: $disabled-cursor,
+		display: inline-flex,
+		flex-shrink: 0,
+		font-weight: $font-weight-semi-bold,
+		height: var(--date-picker-calendar-item-height, 32px),
+		justify-content: center,
+		line-height: var(--date-picker-calendar-item-line-height, 1),
+		margin-left: var(--date-picker-calendar-item-margin-left, 0),
+		margin-right: var(--date-picker-calendar-item-margin-right, 0),
+		padding-bottom: var(--date-picker-calendar-item-padding-bottom, 0),
+		padding-left: var(--date-picker-calendar-item-padding-left, 0),
+		padding-right: var(--date-picker-calendar-item-padding-right, 0),
+		padding-top: var(--date-picker-calendar-item-padding-top, 0),
+		transition: $component-transition,
+		user-select: none,
+		vertical-align: middle,
+		white-space: nowrap,
+		width: var(--date-picker-calendar-item-width, 32px),
+		media-breakpoint-down: (
+			xs: (
+				height: var(--date-picker-calendar-item-xs-down-height, 24px),
+				width: var(--date-picker-calendar-item-xs-down-width, 24px),
 			),
 		),
-		$date-picker-days-row
-	);
-
-	$date-picker-date-row: ();
-
-	// Date Picker Day
-
-	$date-picker-day: ();
-	$date-picker-day: map-deep-merge(
-		(
-			height: var(--date-picker-day-height, 21px),
-		),
-		$date-picker-day
-	);
-
-	// Date Picker Calendar
-
-	$date-picker-calendar-container: ();
-	$date-picker-calendar-container: map-merge(
-		(
-			float: left,
-			min-width: 100%,
+	),
+	$date-picker-calendar-item
+);
+
+$date-picker-date: () !default;
+$date-picker-date: map-deep-merge(
+	(
+		border-radius: var(--date-picker-date-border-radius, 100px),
+		color: var(--date-picker-date-color, $gray-600),
+		cursor: $link-cursor,
+		position: relative,
+
+		hover: (
+			background-color:
+				var(--date-picker-date-hover-background-color, $gray-200),
+			color: var(--date-picker-date-hover-color, $gray-900),
 		),
-		$date-picker-calendar-container
-	);
 
-	$date-picker-calendar-header-container: ();
-	$date-picker-calendar-header-container: map-merge(
-		(
-			padding-bottom:
-				var(
-					--date-picker-calendar-header-container-padding-bottom,
-					16px
-				),
-			padding-left:
-				var(--date-picker-calendar-header-container-padding-left, 16px),
-			padding-right:
+		focus: (
+			background-color:
+				var(--date-picker-date-focus-background-color, $gray-200),
+			box-shadow:
 				var(
-					--date-picker-calendar-header-container-padding-right,
-					16px
-				),
-			padding-top:
-				var(--date-picker-calendar-header-container-padding-top, 16px),
-			media-breakpoint-down: (
-				xs: (
-					padding-bottom:
-						var(
-							--date-picker-calendar-header-container-xs-down-padding-bottom,
-							4px
-						),
-					padding-left:
-						var(
-							--date-picker-calendar-header-container-xs-down-padding-left,
-							6px
-						),
-					padding-right:
-						var(
-							--date-picker-calendar-header-container-xs-down-padding-right,
-							6px
-						),
-					padding-top:
-						var(
-							--date-picker-calendar-header-container-xs-down-padding-top,
-							8px
-						),
-				),
-			),
-		),
-		$date-picker-calendar-header-container
-	);
-
-	$date-picker-calendar-body-container: ();
-	$date-picker-calendar-body-container: map-merge(
-		(
-			padding-bottom:
-				var(--date-picker-calendar-body-container-padding-bottom, 8px),
-			padding-left:
-				var(--date-picker-calendar-body-container-padding-left, 8px),
-			padding-right:
-				var(--date-picker-calendar-body-container-padding-right, 8px),
-			media-breakpoint-down: (
-				xs: (
-					padding-bottom:
-						var(
-							--date-picker-calendar-body-container-xs-down-padding-bottom,
-							4px
-						),
-					padding-left:
-						var(
-							--date-picker-calendar-body-container-xs-down-padding-left,
-							6px
-						),
-					padding-right:
-						var(
-							--date-picker-calendar-body-container-xs-down-padding-right,
-							6px
-						),
+					--date-picker-date-focus-box-shadow,
+					$component-focus-box-shadow
 				),
-			),
+			color: var(--date-picker-date-focus-color, $gray-900),
+			outline: 0,
 		),
-		$date-picker-calendar-body-container
-	);
 
-	$date-picker-calendar-footer-container: ();
-	$date-picker-calendar-footer-container: map-merge(
-		(
-			border-color:
-				var(
-					--date-picker-calendar-footer-container-border-color,
-					$gray-400
-				),
-			border-style:
-				var(
-					--date-picker-calendar-footer-container-border-style,
-					solid
-				),
-			border-width:
-				var(
-					--date-picker-calendar-footer-container-border-width,
-					1px 0 0 0
-				),
-			padding-bottom:
-				var(
-					--date-picker-calendar-footer-container-padding-bottom,
-					8px
-				),
-			padding-left:
-				var(--date-picker-calendar-footer-container-padding-left, 14px),
-			padding-right:
+		active: (
+			background-color:
 				var(
-					--date-picker-calendar-footer-container-padding-right,
-					14px
-				),
-			padding-top:
-				var(--date-picker-calendar-footer-container-padding-top, 8px),
-			media-breakpoint-down: (
-				xs: (
-					padding-left:
-						var(
-							--date-picker-calendar-footer-container-xs-down-padding-left,
-							6px
-						),
-					padding-right:
-						var(
-							--date-picker-calendar-footer-container-xs-down-padding-right,
-							6px
-						),
-					padding-top:
-						var(
-							--date-picker-calendar-footer-container-xs-down-padding-top,
-							7px
-						),
+					--date-picker-date-active-background-color,
+					$component-active-bg
 				),
-			),
+			color: var(--date-picker-date-active-color, $component-active-color),
 		),
-		$date-picker-calendar-footer-container
-	);
-
-	// Date Picker Calendar Item
 
-	$date-picker-calendar-item: ();
-	$date-picker-calendar-item: map-deep-merge(
-		(
-			align-items: center,
+		disabled: (
+			background-color:
+				var(--date-picker-date-disabled-background-color, transparent),
+			box-shadow: var(--date-picker-date-disabled-box-shadow, none),
+			color: var(--date-picker-date-disabled-color, $gray-500),
+		),
+	),
+	$date-picker-date
+);
+
+$date-picker-previous-month-date: () !default;
+$date-picker-previous-month-date: map-deep-merge(
+	(
+		color: var(--date-picker-previous-month-date-color, $gray-500),
+		active: (
 			background-color:
 				var(
-					--date-picker-calendar-item-background-color,
-					setter(map-get($date-picker-calendar-item, bg), transparent)
+					--date-picker-previous-month-date-background-color,
+					$primary-l2
 				),
-			border-width: var(--date-picker-calendar-item-border-width, 0),
-			disabled-cursor: $disabled-cursor,
-			display: inline-flex,
-			flex-shrink: 0,
-			font-weight: $font-weight-semi-bold,
-			height: var(--date-picker-calendar-item-height, 32px),
-			justify-content: center,
-			line-height: var(--date-picker-calendar-item-line-height, 1),
-			margin-left: var(--date-picker-calendar-item-margin-left, 0),
-			margin-right: var(--date-picker-calendar-item-margin-right, 0),
-			padding-bottom: var(--date-picker-calendar-item-padding-bottom, 0),
-			padding-left: var(--date-picker-calendar-item-padding-left, 0),
-			padding-right: var(--date-picker-calendar-item-padding-right, 0),
-			padding-top: var(--date-picker-calendar-item-padding-top, 0),
-			transition: $component-transition,
-			user-select: none,
-			vertical-align: middle,
-			white-space: nowrap,
-			width: var(--date-picker-calendar-item-width, 32px),
-			media-breakpoint-down: (
-				xs: (
-					height:
-						var(--date-picker-calendar-item-xs-down-height, 24px),
-					width: var(--date-picker-calendar-item-xs-down-width, 24px),
+			color: var(--date-picker-previous-month-date-color, $secondary),
+		),
+	),
+	$date-picker-previous-month-date
+);
+
+$date-picker-next-month-date: () !default;
+$date-picker-next-month-date: map-deep-merge(
+	(
+		color: var(--date-picker-next-month-date-color, $gray-500),
+		active: (
+			background-color:
+				var(
+					--date-picker-next-month-date-active-background-color,
+					$primary-l2
 				),
-			),
+			color: var(--date-picker-next-month-date-active-color, $primary-l3),
 		),
-		$date-picker-calendar-item
-	);
-
-	$date-picker-date: ();
-	$date-picker-date: map-deep-merge(
-		(
-			border-radius: var(--date-picker-date-border-radius, 100px),
-			color: var(--date-picker-date-color, $gray-600),
-			cursor: $link-cursor,
-			position: relative,
-
-			hover: (
-				background-color:
-					var(--date-picker-date-hover-background-color, $gray-200),
-				color: var(--date-picker-date-hover-color, $gray-900),
+	),
+	$date-picker-next-month-date
+);
+
+// Date Picker Input Group
+
+$date-picker-input-group-item: () !default;
+$date-picker-input-group-item: map-deep-merge(
+	(
+		margin-left: var(--date-picker-input-group-item-margin-left, 2px),
+	),
+	$date-picker-input-group-item
+);
+
+$date-picker-input-group-text: () !default;
+$date-picker-input-group-text: map-deep-merge(
+	(
+		background-color:
+			var(
+				--date-picker-input-group-text-background-color,
+				setter(map-get($date-picker-input-group-text, bg), transparent)
 			),
-
-			focus: (
-				background-color:
-					var(--date-picker-date-focus-background-color, $gray-200),
-				box-shadow:
+		border-color:
+			var(--date-picker-input-group-text-border-color, transparent),
+		min-width: var(--date-picker-input-group-text-min-width, 32px),
+		padding-left: var(--date-picker-input-group-text-padding-left, 4px),
+		padding-right: var(--date-picker-input-group-text-padding-right, 4px),
+		media-breakpoint-down: (
+			xs: (
+				font-size:
 					var(
-						--date-picker-date-focus-box-shadow,
-						$component-focus-box-shadow
+						--date-picker-input-group-text-xs-down-font-size,
+						inherit
 					),
-				color: var(--date-picker-date-focus-color, $gray-900),
-				outline: 0,
+				height:
+					var(
+						--date-picker-input-group-text-xs-down-height,
+						$input-height-sm
+					),
+				min-width:
+					var(--date-picker-input-group-text-xs-down-min-width, 24px),
 			),
-
-			active: (
-				background-color:
+		),
+	),
+	$date-picker-input-group-text
+);
+
+$date-picker-input-form-control: () !default;
+$date-picker-input-form-control: map-deep-merge(
+	(
+		media-breakpoint-down: (
+			xs: (
+				border-radius:
 					var(
-						--date-picker-date-active-background-color,
-						$component-active-bg
+						--date-picker-input-form-control-border-radius,
+						clay-enable-rounded($input-border-radius-sm)
 					),
-				color:
+				font-size:
 					var(
-						--date-picker-date-active-color,
-						$component-active-color
+						--date-picker-input-form-control-font-size,
+						$input-font-size-sm
 					),
-			),
-
-			disabled: (
-				background-color:
+				height:
 					var(
-						--date-picker-date-disabled-background-color,
-						transparent
+						--date-picker-input-form-control-height,
+						$input-height-sm
 					),
-				box-shadow: var(--date-picker-date-disabled-box-shadow, none),
-				color: var(--date-picker-date-disabled-color, $gray-500),
-			),
-		),
-		$date-picker-date
-	);
-
-	$date-picker-previous-month-date: ();
-	$date-picker-previous-month-date: map-deep-merge(
-		(
-			color: var(--date-picker-previous-month-date-color, $gray-500),
-			active: (
-				background-color:
+				line-height:
 					var(
-						--date-picker-previous-month-date-background-color,
-						$primary-l2
+						--date-picker-input-form-control-line-height,
+						$input-line-height-sm
 					),
-				color: var(--date-picker-previous-month-date-color, $secondary),
-			),
-		),
-		$date-picker-previous-month-date
-	);
-
-	$date-picker-next-month-date: ();
-	$date-picker-next-month-date: map-deep-merge(
-		(
-			color: var(--date-picker-next-month-date-color, $gray-500),
-			active: (
-				background-color:
+				min-height:
 					var(
-						--date-picker-next-month-date-active-background-color,
-						$primary-l2
+						--date-picker-input-form-control-min-height,
+						$input-height-sm
 					),
-				color:
+				padding-bottom:
 					var(
-						--date-picker-next-month-date-active-color,
-						$primary-l3
+						--date-picker-input-form-control-padding-bottom,
+						$input-padding-y-sm
+					),
+				padding-left:
+					var(
+						--date-picker-input-form-control-padding-left,
+						$input-padding-x-sm
+					),
+				padding-right:
+					var(
+						--date-picker-input-form-control-padding-right,
+						$input-padding-x-sm
+					),
+				padding-top:
+					var(
+						--date-picker-input-form-control-padding-top,
+						$input-padding-y-sm
 					),
 			),
 		),
-		$date-picker-next-month-date
-	);
-
-	// Date Picker Input Group
-
-	$date-picker-input-group-item: ();
-	$date-picker-input-group-item: map-deep-merge(
-		(
-			margin-left: var(--date-picker-input-group-item-margin-left, 2px),
-		),
-		$date-picker-input-group-item
-	);
-
-	$date-picker-input-group-text: ();
-	$date-picker-input-group-text: map-deep-merge(
-		(
-			background-color:
-				var(
-					--date-picker-input-group-text-background-color,
-					setter(
-						map-get($date-picker-input-group-text, bg),
-						transparent
-					)
-				),
-			border-color:
-				var(--date-picker-input-group-text-border-color, transparent),
-			min-width: var(--date-picker-input-group-text-min-width, 32px),
-			padding-left: var(--date-picker-input-group-text-padding-left, 4px),
-			padding-right:
-				var(--date-picker-input-group-text-padding-right, 4px),
-			media-breakpoint-down: (
-				xs: (
-					font-size:
-						var(
-							--date-picker-input-group-text-xs-down-font-size,
-							inherit
-						),
-					height:
-						var(
-							--date-picker-input-group-text-xs-down-height,
-							$input-height-sm
-						),
-					min-width:
-						var(
-							--date-picker-input-group-text-xs-down-min-width,
-							24px
-						),
-				),
-			),
-		),
-		$date-picker-input-group-text
-	);
-
-	$date-picker-input-form-control: ();
-	$date-picker-input-form-control: map-deep-merge(
-		(
-			media-breakpoint-down: (
-				xs: (
-					border-radius:
-						var(
-							--date-picker-input-form-control-border-radius,
-							clay-enable-rounded($input-border-radius-sm)
-						),
-					font-size:
-						var(
-							--date-picker-input-form-control-font-size,
-							$input-font-size-sm
-						),
-					height:
-						var(
-							--date-picker-input-form-control-height,
-							$input-height-sm
-						),
-					line-height:
-						var(
-							--date-picker-input-form-control-line-height,
-							$input-line-height-sm
-						),
-					min-height:
-						var(
-							--date-picker-input-form-control-min-height,
-							$input-height-sm
-						),
-					padding-bottom:
-						var(
-							--date-picker-input-form-control-padding-bottom,
-							$input-padding-y-sm
-						),
-					padding-left:
-						var(
-							--date-picker-input-form-control-padding-left,
-							$input-padding-x-sm
-						),
-					padding-right:
-						var(
-							--date-picker-input-form-control-padding-right,
-							$input-padding-x-sm
-						),
-					padding-top:
-						var(
-							--date-picker-input-form-control-padding-top,
-							$input-padding-y-sm
-						),
-				),
-			),
-		),
-		$date-picker-input-form-control
-	);
-}
+	),
+	$date-picker-input-form-control
+);