@clayui/css 3.161.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_pagination.scss

@@ -1,1101 +1,1064 @@
-@if ($enable-atlas-custom-properties) {
-	$pagination-bg: var(--pagination-background-color, transparent);
-	$pagination-border-color: var(--pagination-border-color, $pagination-bg);
-	$pagination-border-width: var(--pagination-border-width, 1px);
-	$pagination-color: var(--pagination-color, $gray-600);
-	$pagination-font-size: var(--pagination-font-size, 14px);
-	$pagination-line-height: var(--pagination-line-height, 1);
-	$pagination-padding-x: var(--pagination-padding-x, 10px);
-	$pagination-padding-y: var(--pagination-padding-y, 0);
-
-	$pagination-hover-bg: var(
-		--pagination-hover-bg,
-		unquote('hsl(from #{$gray-900} h s l / 0.04)')
-	);
-	$pagination-hover-border-color: var(
-		--pagination-hover-border-color,
-		transparent
-	);
-	$pagination-hover-color: var(--pagination-hover-color, $gray-900);
-
-	$pagination-focus-box-shadow: var(
-		--pagination-focus-box-shadow,
-		$component-focus-box-shadow
-	);
-	$pagination-focus-outline: 0;
-
-	$pagination-active-bg: var(
-		--pagination-active-bg,
-		unquote('hsl(from #{$primary} h s l / 0.06)')
-	);
-	$pagination-active-border-color: var(
-		--pagination-active-border-color,
-		transparent
-	);
-	$pagination-active-color: var(--pagination-active-color, $gray-900);
-
-	$pagination-disabled-bg: var(--pagination-disabled-bg, transparent);
-	$pagination-disabled-border-color: var(
-		--pagination-disabled-border-color,
-		$pagination-disabled-bg
-	);
-	$pagination-disabled-color: var(--pagination-disabled-color, $gray-600);
-
-	// Pagination Item
-
-	$pagination-item-height: 32px;
-
-	// @deprecated as of v2 use the Sass map `$pagination-item` instead
-
-	$pagination-item-margin-x: 4px;
-
-	// @deprecated as of v2 use the Sass map `$pagination-item` instead
-
-	$pagination-item-margin-y: 0px;
-
-	$pagination-item: ();
-	$pagination-item: map-deep-merge(
-		(
-			margin-bottom:
-				var(--pagination-item-margin-bottom, $pagination-item-margin-y),
-			margin-left:
-				var(--pagination-item-margin-left, $pagination-item-margin-x),
-			margin-right:
-				var(--pagination-item-margin-right, $pagination-item-margin-x),
-			margin-top:
-				var(--pagination-item-margin-top, $pagination-item-margin-y),
-		),
-		$pagination-item
-	);
-
-	// Pagination Link
-
-	// @deprecated as of v2 use the Sass map `$pagination-link` instead
-
-	$pagination-link-border-radius: 4px;
-
-	// @deprecated as of v2 use the Sass map `$pagination-link` instead
-
-	$pagination-link-cursor: null;
-
-	// @deprecated as of v2 use the Sass map `$pagination-link` instead
-
-	$pagination-link-transition:
-		background-color 0.15s ease-in-out,
-		border-color 0.15s ease-in-out;
-
-	$pagination-link-first-border-radius: $pagination-link-border-radius;
-	$pagination-link-last-border-radius: $pagination-link-border-radius;
-
-	$pagination-margin-bottom: 8px;
-
-	$pagination-margin-top-mobile: 8px;
-
-	// @deprecated as of v2 use the Sass map `$pagination-link-disabled` instead
-
-	$pagination-disabled-cursor: $disabled-cursor;
+$pagination-bg: var(--pagination-background-color, transparent) !default;
+$pagination-border-color: var(
+	--pagination-border-color,
+	$pagination-bg
+) !default;
+$pagination-border-width: var(--pagination-border-width, 1px) !default;
+$pagination-color: var(--pagination-color, $gray-600) !default;
+$pagination-font-size: var(--pagination-font-size, 14px) !default;
+$pagination-line-height: var(--pagination-line-height, 1) !default;
+$pagination-padding-x: var(--pagination-padding-x, 10px) !default;
+$pagination-padding-y: var(--pagination-padding-y, 0) !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-link-disabled` instead
+$pagination-hover-bg: var(
+	--pagination-hover-bg,
+	unquote('hsl(from #{$gray-900} h s l / 0.04)')
+) !default;
+$pagination-hover-border-color: var(
+	--pagination-hover-border-color,
+	transparent
+) !default;
+$pagination-hover-color: var(--pagination-hover-color, $gray-900) !default;
+
+$pagination-focus-box-shadow: var(
+	--pagination-focus-box-shadow,
+	$component-focus-box-shadow
+) !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-active-bg: var(
+	--pagination-active-bg,
+	unquote('hsl(from #{$primary} h s l / 0.06)')
+) !default;
+$pagination-active-border-color: var(
+	--pagination-active-border-color,
+	transparent
+) !default;
+$pagination-active-color: var(--pagination-active-color, $gray-900) !default;
+
+$pagination-disabled-bg: var(--pagination-disabled-bg, transparent) !default;
+$pagination-disabled-border-color: var(
+	--pagination-disabled-border-color,
+	$pagination-disabled-bg
+) !default;
+$pagination-disabled-color: var(
+	--pagination-disabled-color,
+	$gray-600
+) !default;
+
+// Pagination Item
+
+$pagination-item-height: 32px !default;
+
+// @deprecated as of v2 use the Sass map `$pagination-item` instead
+
+$pagination-item-margin-x: 4px !default;
+
+// @deprecated as of v2 use the Sass map `$pagination-item` instead
+
+$pagination-item-margin-y: 0px !default;
+
+$pagination-item: () !default;
+$pagination-item: map-deep-merge(
+	(
+		margin-bottom:
+			var(--pagination-item-margin-bottom, $pagination-item-margin-y),
+		margin-left:
+			var(--pagination-item-margin-left, $pagination-item-margin-x),
+		margin-right:
+			var(--pagination-item-margin-right, $pagination-item-margin-x),
+		margin-top: var(--pagination-item-margin-top, $pagination-item-margin-y),
+	),
+	$pagination-item
+);
+
+// Pagination Link
+
+// @deprecated as of v2 use the Sass map `$pagination-link` instead
+
+$pagination-link-border-radius: 4px !default;
+
+// @deprecated as of v2 use the Sass map `$pagination-link` instead
+
+$pagination-link-cursor: null !default;
+
+// @deprecated as of v2 use the Sass map `$pagination-link` instead
+
+$pagination-link-transition:
+	background-color 0.15s ease-in-out,
+	border-color 0.15s ease-in-out !default;
+
+$pagination-link-first-border-radius: $pagination-link-border-radius !default;
+$pagination-link-last-border-radius: $pagination-link-border-radius !default;
+
+$pagination-margin-bottom: 8px !default;
+
+$pagination-margin-top-mobile: 8px !default;
+
+// @deprecated as of v2 use the Sass map `$pagination-link-disabled` instead
+
+$pagination-disabled-cursor: $disabled-cursor !default;
+
+// @deprecated as of v2 use the Sass map `$pagination-link-disabled` instead
 
-	$pagination-disabled-opacity: 0.5;
+$pagination-disabled-opacity: 0.5 !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-link-disabled` instead
+// @deprecated as of v2 use the Sass map `$pagination-link-disabled` instead
 
-	$pagination-disabled-pointer-events: auto;
+$pagination-disabled-pointer-events: auto !default;
 
-	// .page-link
+// .page-link
 
-	$pagination-link-hover: ();
-	$pagination-link-hover: map-deep-merge(
-		(
+$pagination-link-hover: () !default;
+$pagination-link-hover: map-deep-merge(
+	(
+		background-color:
+			var(--pagination-link-hover-background-color, $pagination-hover-bg),
+		border-color:
+			var(
+				--pagination-link-hover-border-color,
+				$pagination-hover-border-color
+			),
+		color: var(--pagination-link-hover-color, $pagination-hover-color),
+		font-weight:
+			var(--pagination-link-hover-font-weight, $font-weight-semi-bold),
+		letter-spacing: var(--pagination-link-hover-letter-spacing, 0),
+		text-decoration: none,
+		z-index: 2,
+
+		before: (
 			background-color:
 				var(
-					--pagination-link-hover-background-color,
-					$pagination-hover-bg
-				),
-			border-color:
-				var(
-					--pagination-link-hover-border-color,
-					$pagination-hover-border-color
+					--pagination-link-hover-highlight-background-color,
+					$secondary-l0
 				),
-			color: var(--pagination-link-hover-color, $pagination-hover-color),
-			font-weight:
+			height: var(--pagination-link-hover-highlight-height, 3px),
+		),
+	),
+	$pagination-link-hover
+);
+
+$pagination-link-focus: () !default;
+$pagination-link-focus: map-deep-merge(
+	(
+		border-color:
+			var(
+				--pagination-link-focus-border-color,
+				$pagination-hover-border-color
+			),
+		box-shadow: none,
+		color: var(--pagination-link-focus-color, $pagination-hover-color),
+		outline: $pagination-focus-outline,
+
+		after: (
+			border-radius: $pagination-link-border-radius,
+			bottom: 0,
+			box-shadow:
 				var(
-					--pagination-link-hover-font-weight,
-					$font-weight-semi-bold
+					--pagination-link-focus-box-shadow,
+					$pagination-focus-box-shadow
 				),
-			letter-spacing: var(--pagination-link-hover-letter-spacing, 0),
-			text-decoration: none,
-			z-index: 2,
-
-			before: (
-				background-color:
-					var(
-						--pagination-link-hover-highlight-background-color,
-						$secondary-l0
-					),
-				height: var(--pagination-link-hover-highlight-height, 3px),
-			),
+			content: '',
+			display: block,
+			left: 0,
+			pointer-events: none,
+			position: absolute,
+			right: 0,
+			top: 0,
 		),
-		$pagination-link-hover
-	);
+	),
+	$pagination-link-focus
+);
+
+$pagination-link-active: () !default;
+$pagination-link-active: map-deep-merge(
+	(
+		background-color:
+			var(
+				--pagination-link-active-background-color,
+				$pagination-active-bg
+			),
+		border-color:
+			var(
+				--pagination-link-active-border-color,
+				$pagination-active-border-color
+			),
+		color: var(--pagination-link-active-color, $pagination-active-color),
+		font-weight:
+			var(--pagination-link-active-font-weight, $font-weight-semi-bold),
+		letter-spacing: 0,
+	),
+	$pagination-link-active
+);
+
+$pagination-link-disabled: () !default;
+$pagination-link-disabled: map-deep-merge(
+	(
+		background-color:
+			var(
+				--pagination-link-disabled-background-color,
+				$pagination-disabled-bg
+			),
+		border-color:
+			var(
+				--pagination-link-disabled-border-color,
+				$pagination-disabled-border-color
+			),
+		box-shadow: none,
+		color: var(--pagination-link-disabled-color, $pagination-disabled-color),
+		cursor: $pagination-disabled-cursor,
+		opacity:
+			var(
+				--pagination-link-disabled-opacity,
+				$pagination-disabled-opacity
+			),
+		pointer-events: $pagination-disabled-pointer-events,
 
-	$pagination-link-focus: ();
-	$pagination-link-focus: map-deep-merge(
-		(
-			border-color:
-				var(
-					--pagination-link-focus-border-color,
-					$pagination-hover-border-color
-				),
-			box-shadow: none,
-			color: var(--pagination-link-focus-color, $pagination-hover-color),
-			outline: $pagination-focus-outline,
+		before: (
+			content: none,
+		),
 
+		focus: (
 			after: (
-				border-radius: $pagination-link-border-radius,
-				bottom: 0,
-				box-shadow:
-					var(
-						--pagination-link-focus-box-shadow,
-						$pagination-focus-box-shadow
-					),
-				content: '',
-				display: block,
-				left: 0,
-				pointer-events: none,
-				position: absolute,
-				right: 0,
-				top: 0,
+				content: none,
 			),
 		),
-		$pagination-link-focus
-	);
-
-	$pagination-link-active: ();
-	$pagination-link-active: map-deep-merge(
-		(
-			background-color:
-				var(
-					--pagination-link-active-background-color,
-					$pagination-active-bg
-				),
-			border-color:
-				var(
-					--pagination-link-active-border-color,
-					$pagination-active-border-color
-				),
-			color:
-				var(--pagination-link-active-color, $pagination-active-color),
-			font-weight:
+	),
+	$pagination-link-disabled
+);
+
+$pagination-link: () !default;
+$pagination-link: map-deep-merge(
+	(
+		align-items: center,
+		background-color:
+			var(--pagination-link-background-color, $pagination-bg),
+		border-radius:
+			var(--pagination-link-border-radius, $pagination-link-border-radius),
+		border-color:
+			var(--pagination-link-border-color, $pagination-border-color),
+		border-style: var(--pagination-link-border-style, solid),
+		border-width:
+			var(--pagination-link-border-width, $pagination-border-width),
+		color: var(--pagination-link-color, $pagination-color),
+		cursor: $pagination-link-cursor,
+		display: inline-flex,
+		height: var(--pagination-link-height, $pagination-item-height),
+		justify-content: center,
+		letter-spacing: var(--pagination-link-letter-spacing, 0.033em),
+		line-height: var(--pagination-link-line-height, $pagination-line-height),
+		margin-left: var(--pagination-link-margin-left, 0),
+		min-width:
+			var(--pagination-link-min-width, var(--pagination-link-height)),
+		padding-bottom:
+			var(--pagination-link-padding-bottom, $pagination-padding-y),
+		padding-left: var(--pagination-link-padding-left, $pagination-padding-x),
+		padding-right:
+			var(--pagination-link-padding-right, $pagination-padding-x),
+		padding-top: var(--pagination-link-padding-top, $pagination-padding-y),
+		position: relative,
+		text-decoration: var(--pagination-link-text-decoration, none),
+		transition: $pagination-link-transition,
+
+		before: (
+			border-radius:
 				var(
-					--pagination-link-active-font-weight,
-					$font-weight-semi-bold
+					--pagination-link-highlight-border-radius,
+					0 0 $border-radius $border-radius
 				),
-			letter-spacing: 0,
+			bottom: var(--pagination-link-highlight-bottom, 0),
+			content: '',
+			display: block,
+			left: var(--pagination-link-highlight-left, 0),
+			position: absolute,
+			right: var(--pagination-link-highlight-right, 0),
+			top: var(--pagination-link-highlight-top, auto),
 		),
-		$pagination-link-active
-	);
 
-	$pagination-link-disabled: ();
-	$pagination-link-disabled: map-deep-merge(
-		(
+		hover: $pagination-link-hover,
+
+		focus: $pagination-link-focus,
+
+		active: $pagination-link-active,
+
+		active-class: (
 			background-color:
 				var(
-					--pagination-link-disabled-background-color,
-					$pagination-disabled-bg
+					--pagination-link-active-class-background-color,
+					$pagination-active-bg
 				),
 			border-color:
 				var(
-					--pagination-link-disabled-border-color,
-					$pagination-disabled-border-color
+					--pagination-link-active-class-border-color,
+					$pagination-active-border-color
 				),
-			box-shadow: none,
 			color:
 				var(
-					--pagination-link-disabled-color,
-					$pagination-disabled-color
-				),
-			cursor: $pagination-disabled-cursor,
-			opacity:
-				var(
-					--pagination-link-disabled-opacity,
-					$pagination-disabled-opacity
-				),
-			pointer-events: $pagination-disabled-pointer-events,
-
-			before: (
-				content: none,
-			),
-
-			focus: (
-				after: (
-					content: none,
+					--pagination-link-active-class-color,
+					$pagination-active-color
 				),
-			),
-		),
-		$pagination-link-disabled
-	);
-
-	$pagination-link: ();
-	$pagination-link: map-deep-merge(
-		(
-			align-items: center,
-			background-color:
-				var(--pagination-link-background-color, $pagination-bg),
-			border-radius:
+			font-weight:
 				var(
-					--pagination-link-border-radius,
-					$pagination-link-border-radius
+					--pagination-link-active-class-font-weight,
+					$font-weight-semi-bold
 				),
-			border-color:
-				var(--pagination-link-border-color, $pagination-border-color),
-			border-style: var(--pagination-link-border-style, solid),
-			border-width:
-				var(--pagination-link-border-width, $pagination-border-width),
-			color: var(--pagination-link-color, $pagination-color),
-			cursor: $pagination-link-cursor,
-			display: inline-flex,
-			height: var(--pagination-link-height, $pagination-item-height),
-			justify-content: center,
-			letter-spacing: var(--pagination-link-letter-spacing, 0.033em),
-			line-height:
-				var(--pagination-link-line-height, $pagination-line-height),
-			margin-left: var(--pagination-link-margin-left, 0),
-			min-width:
-				var(--pagination-link-min-width, var(--pagination-link-height)),
-			padding-bottom:
-				var(--pagination-link-padding-bottom, $pagination-padding-y),
-			padding-left:
-				var(--pagination-link-padding-left, $pagination-padding-x),
-			padding-right:
-				var(--pagination-link-padding-right, $pagination-padding-x),
-			padding-top:
-				var(--pagination-link-padding-top, $pagination-padding-y),
-			position: relative,
-			text-decoration: var(--pagination-link-text-decoration, none),
-			transition: $pagination-link-transition,
-
+			letter-spacing:
+				var(--pagination-link-active-class-letter-spacing, 0),
 			before: (
-				border-radius:
+				background-color:
 					var(
-						--pagination-link-highlight-border-radius,
-						0 0 $border-radius $border-radius
+						--pagination-link-active-class-highlight-background-color,
+						$primary-l0
 					),
-				bottom: var(--pagination-link-highlight-bottom, 0),
-				content: '',
-				display: block,
-				left: var(--pagination-link-highlight-left, 0),
-				position: absolute,
-				right: var(--pagination-link-highlight-right, 0),
-				top: var(--pagination-link-highlight-top, auto),
+				height:
+					var(--pagination-link-active-class-highlight-height, 4px),
 			),
+		),
 
-			hover: $pagination-link-hover,
-
-			focus: $pagination-link-focus,
-
-			active: $pagination-link-active,
+		disabled: $pagination-link-disabled,
 
-			active-class: (
+		show: (
+			font-weight:
+				var(--pagination-link-show-font-weight, $font-weight-semi-bold),
+			letter-spacing: var(--pagination-link-show-letter-spacing, 0),
+			before: (
 				background-color:
 					var(
-						--pagination-link-active-class-background-color,
-						$pagination-active-bg
-					),
-				border-color:
-					var(
-						--pagination-link-active-class-border-color,
-						$pagination-active-border-color
-					),
-				color:
-					var(
-						--pagination-link-active-class-color,
-						$pagination-active-color
-					),
-				font-weight:
-					var(
-						--pagination-link-active-class-font-weight,
-						$font-weight-semi-bold
+						--pagination-link-show-highlight-background-color,
+						transparent
 					),
-				letter-spacing:
-					var(--pagination-link-active-class-letter-spacing, 0),
-				before: (
-					background-color:
-						var(
-							--pagination-link-active-class-highlight-background-color,
-							$primary-l0
-						),
-					height:
-						var(
-							--pagination-link-active-class-highlight-height,
-							4px
-						),
-				),
 			),
 
-			disabled: $pagination-link-disabled,
-
-			show: (
-				font-weight:
-					var(
-						--pagination-link-show-font-weight,
-						$font-weight-semi-bold
-					),
-				letter-spacing: var(--pagination-link-show-letter-spacing, 0),
+			hover: (
 				before: (
 					background-color:
 						var(
 							--pagination-link-show-highlight-background-color,
-							transparent
+							$secondary-l0
 						),
+					height: var(--pagination-link-show-highlight-height, 3px),
 				),
-
-				hover: (
-					before: (
-						background-color:
-							var(
-								--pagination-link-show-highlight-background-color,
-								$secondary-l0
-							),
-						height:
-							var(--pagination-link-show-highlight-height, 3px),
-					),
-				),
-			),
-
-			lexicon-icon: (
-				margin-top: 0,
 			),
 		),
-		$pagination-link
-	);
-
-	// .page-item:first-child .page-link, .page-link-first
 
-	$pagination-link-first: ();
-	$pagination-link-first: map-merge(
-		(
-			border-radius:
-				var(
-					--pagination-link-first-border-radius,
-					clay-enable-rounded($pagination-link-first-border-radius)
-				),
-		),
-		$pagination-link-first
-	);
-
-	// .page-item:last-child .page-link, .page-link-last
-
-	$pagination-link-last: ();
-	$pagination-link-last: map-deep-merge(
-		(
-			border-radius:
-				var(
-					--pagination-link-last-border-radius,
-					clay-enable-rounded($pagination-link-last-border-radius)
-				),
-		),
-		$pagination-link-last
-	);
-
-	// .pagination
-
-	$pagination: ();
-	$pagination: map-deep-merge(
-		(
-			border-radius:
-				var(
-					--pagination-border-radius,
-					clay-enable-rounded($border-radius)
-				),
-			display: flex,
-			flex-wrap: wrap,
-			font-size: var(--pagination-font-size, $pagination-font-size),
-			list-style: none,
-			margin-bottom:
-				var(--pagination-margin-bottom, $pagination-margin-bottom),
-			padding-left: var(--pagination-padding-left, 0),
+		lexicon-icon: (
+			margin-top: 0,
 		),
-		$pagination
-	);
-
-	// .pagination-bar
-
-	$pagination-bar: ();
-	$pagination-bar: map-deep-merge(
-		(
-			align-items: center,
-			display: flex,
-			flex-wrap: wrap,
-
-			media-breakpoint-down: (
-				sm: (
-					flex-direction: column,
-					justify-content: center,
-
-					pagination: (
-						margin-top: $pagination-margin-top-mobile,
-					),
+	),
+	$pagination-link
+);
+
+// .page-item:first-child .page-link, .page-link-first
+
+$pagination-link-first: () !default;
+$pagination-link-first: map-merge(
+	(
+		border-radius:
+			var(
+				--pagination-link-first-border-radius,
+				clay-enable-rounded($pagination-link-first-border-radius)
+			),
+	),
+	$pagination-link-first
+);
+
+// .page-item:last-child .page-link, .page-link-last
+
+$pagination-link-last: () !default;
+$pagination-link-last: map-deep-merge(
+	(
+		border-radius:
+			var(
+				--pagination-link-last-border-radius,
+				clay-enable-rounded($pagination-link-last-border-radius)
+			),
+	),
+	$pagination-link-last
+);
+
+// .pagination
+
+$pagination: () !default;
+$pagination: map-deep-merge(
+	(
+		border-radius:
+			var(--pagination-border-radius, clay-enable-rounded($border-radius)),
+		display: flex,
+		flex-wrap: wrap,
+		font-size: var(--pagination-font-size, $pagination-font-size),
+		list-style: none,
+		margin-bottom:
+			var(--pagination-margin-bottom, $pagination-margin-bottom),
+		padding-left: var(--pagination-padding-left, 0),
+	),
+	$pagination
+);
+
+// .pagination-bar
+
+$pagination-bar: () !default;
+$pagination-bar: map-deep-merge(
+	(
+		align-items: center,
+		display: flex,
+		flex-wrap: wrap,
+
+		media-breakpoint-down: (
+			sm: (
+				flex-direction: column,
+				justify-content: center,
+
+				pagination: (
+					margin-top: $pagination-margin-top-mobile,
 				),
 			),
 		),
-		$pagination-bar
-	);
+	),
+	$pagination-bar
+);
 
-	// Pagination Dropdown Menu
+// Pagination Dropdown Menu
 
-	$pagination-dropdown-menu-spacer-y: 10px; // 10px
+$pagination-dropdown-menu-spacer-y: 10px !default; // 10px
 
-	// Pagination Items Per Page
+// Pagination Items Per Page
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-bg: transparent;
+$pagination-items-per-page-bg: transparent !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-border-color: $pagination-border-color;
+$pagination-items-per-page-border-color: $pagination-border-color !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-border-radius: $border-radius;
+$pagination-items-per-page-border-radius: $border-radius !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-color: $pagination-color;
-	$pagination-items-per-page-font-size: $pagination-font-size;
+$pagination-items-per-page-color: $pagination-color !default;
+$pagination-items-per-page-font-size: $pagination-font-size !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-transition: $pagination-link-transition;
+$pagination-items-per-page-transition: $pagination-link-transition !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-hover` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-hover` instead
 
-	$pagination-items-per-page-hover-bg: $pagination-hover-bg;
+$pagination-items-per-page-hover-bg: $pagination-hover-bg !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-hover` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-hover` instead
 
-	$pagination-items-per-page-hover-border-color: $pagination-hover-border-color;
+$pagination-items-per-page-hover-border-color: $pagination-hover-border-color !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-hover` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-hover` instead
 
-	$pagination-items-per-page-hover-color: $pagination-hover-color;
+$pagination-items-per-page-hover-color: $pagination-hover-color !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-focus` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-focus` instead
 
-	$pagination-items-per-page-focus-box-shadow: $pagination-focus-box-shadow;
+$pagination-items-per-page-focus-box-shadow: $pagination-focus-box-shadow !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-focus` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link-focus` instead
 
-	$pagination-items-per-page-focus-outline: 0;
+$pagination-items-per-page-focus-outline: 0 !default;
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-lexicon-icon-margin-left: 2px; // 2px
+$pagination-items-per-page-lexicon-icon-margin-left: 2px !default; // 2px
 
-	// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
+// @deprecated as of v2 use the Sass map `$pagination-items-per-page-link` instead
 
-	$pagination-items-per-page-lexicon-icon-margin-top: 2px; // 2px
+$pagination-items-per-page-lexicon-icon-margin-top: 2px !default; // 2px
 
-	// Pagination Items Per Page Link
+// Pagination Items Per Page Link
 
-	$pagination-items-per-page-link-hover: ();
-	$pagination-items-per-page-link-hover: map-deep-merge(
-		(
-			background-color:
-				var(
-					--pagination-items-per-page-link-hover-background-color,
-					$pagination-items-per-page-hover-bg
-				),
-			border-color:
-				var(
-					--pagination-items-per-page-link-hover-border-color,
-					$pagination-items-per-page-hover-border-color
-				),
-			color:
-				var(
-					--pagination-items-per-page-link-hover-color,
-					$pagination-items-per-page-hover-color
-				),
+$pagination-items-per-page-link-hover: () !default;
+$pagination-items-per-page-link-hover: map-deep-merge(
+	(
+		background-color:
+			var(
+				--pagination-items-per-page-link-hover-background-color,
+				$pagination-items-per-page-hover-bg
+			),
+		border-color:
+			var(
+				--pagination-items-per-page-link-hover-border-color,
+				$pagination-items-per-page-hover-border-color
+			),
+		color:
+			var(
+				--pagination-items-per-page-link-hover-color,
+				$pagination-items-per-page-hover-color
+			),
+	),
+	$pagination-items-per-page-link-hover
+);
+
+$pagination-items-per-page-link-focus: () !default;
+$pagination-items-per-page-link-focus: map-deep-merge(
+	(
+		background-color:
+			var(
+				--pagination-items-per-page-link-focus-background-color,
+				map-get($pagination-link-focus, background-color)
+			),
+		border-color:
+			var(
+				--pagination-items-per-page-link-focus-border-color,
+				map-get($pagination-link-focus, border-color)
+			),
+		box-shadow: $pagination-items-per-page-focus-box-shadow,
+		color:
+			var(
+				--pagination-items-per-page-link-focus-color,
+				map-get($pagination-link-focus, color)
+			),
+		outline: $pagination-items-per-page-focus-outline,
+
+		after: map-get($pagination-link-focus, after),
+	),
+	$pagination-items-per-page-link-focus
+);
+
+$pagination-items-per-page-link-active: () !default;
+$pagination-items-per-page-link-active: map-deep-merge(
+	(
+		background-color:
+			var(
+				--pagination-items-per-page-link-active-background-color,
+				$pagination-active-bg
+			),
+		border-color:
+			var(
+				--pagination-items-per-page-link-active-border-color,
+				$pagination-active-border-color
+			),
+		color:
+			var(
+				--pagination-items-per-page-link-active-color,
+				$pagination-active-color
+			),
+	),
+	$pagination-items-per-page-link-active
+);
+
+$pagination-items-per-page-link-disabled: () !default;
+$pagination-items-per-page-link-disabled: map-deep-merge(
+	(
+		background-color:
+			var(
+				--pagination-items-per-page-link-disabled-background-color,
+				$pagination-disabled-bg
+			),
+		border-color:
+			var(
+				--pagination-items-per-page-link-disabled-border-color,
+				$pagination-disabled-border-color
+			),
+		box-shadow: none,
+		color:
+			var(
+				--pagination-items-per-page-link-disabled-color,
+				$pagination-disabled-color
+			),
+		cursor: $pagination-disabled-cursor,
+		font-weight:
+			var(
+				--pagination-items-per-page-link-disabled-font-weight,
+				$font-weight-normal
+			),
+		opacity:
+			var(
+				--pagination-items-per-page-link-disabled-opacity,
+				$pagination-disabled-opacity
+			),
+		pointer-events: $pagination-disabled-pointer-events,
+		letter-spacing:
+			var(
+				--pagination-items-per-page-link-disabled-letter-spacing,
+				0.033em
+			),
+		before: (
+			content: none,
 		),
-		$pagination-items-per-page-link-hover
-	);
 
-	$pagination-items-per-page-link-focus: ();
-	$pagination-items-per-page-link-focus: map-deep-merge(
-		(
-			background-color:
-				var(
-					--pagination-items-per-page-link-focus-background-color,
-					map-get($pagination-link-focus, background-color)
-				),
-			border-color:
-				var(
-					--pagination-items-per-page-link-focus-border-color,
-					map-get($pagination-link-focus, border-color)
-				),
-			box-shadow: $pagination-items-per-page-focus-box-shadow,
-			color:
-				var(
-					--pagination-items-per-page-link-focus-color,
-					map-get($pagination-link-focus, color)
-				),
-			outline: $pagination-items-per-page-focus-outline,
-
-			after: map-get($pagination-link-focus, after),
+		focus: (
+			after: (
+				content: none,
+			),
 		),
-		$pagination-items-per-page-link-focus
-	);
+	),
+	$pagination-items-per-page-link-disabled
+);
+
+$pagination-items-per-page-link: () !default;
+$pagination-items-per-page-link: map-deep-merge(
+	(
+		align-items: center,
+		background-color:
+			var(
+				--pagination-items-per-page-link-background-color,
+				$pagination-items-per-page-bg
+			),
+		border-color:
+			var(
+				--pagination-items-per-page-link-border-color,
+				$pagination-items-per-page-border-color
+			),
+		border-radius:
+			var(
+				--pagination-items-per-page-link-border-radius,
+				$pagination-items-per-page-border-radius
+			),
+		border-style: var(--pagination-items-per-page-link-border-style, solid),
+		border-width:
+			var(
+				--pagination-items-per-page-link-border-width,
+				$pagination-border-width
+			),
+		color:
+			var(
+				--pagination-items-per-page-link-color,
+				$pagination-items-per-page-color
+			),
+		display: inline-flex,
+		height:
+			var(
+				--pagination-items-per-page-link-height,
+				$pagination-item-height
+			),
+		justify-content: center,
+		letter-spacing:
+			var(--pagination-items-per-page-link-letter-spacing, 0.025em),
+		line-height:
+			var(
+				--pagination-items-per-page-link-line-height,
+				$pagination-line-height
+			),
+		padding-bottom:
+			var(
+				--pagination-items-per-page-link-padding-bottom,
+				$pagination-padding-y
+			),
+		padding-left:
+			var(
+				--pagination-items-per-page-link-padding-left,
+				$pagination-padding-x
+			),
+		padding-right:
+			var(
+				--pagination-items-per-page-link-padding-right,
+				$pagination-padding-x
+			),
+		padding-top:
+			var(
+				--pagination-items-per-page-link-padding-top,
+				$pagination-padding-y
+			),
+		text-decoration: none,
+		transition: $pagination-items-per-page-transition,
 
-	$pagination-items-per-page-link-active: ();
-	$pagination-items-per-page-link-active: map-deep-merge(
-		(
-			background-color:
-				var(
-					--pagination-items-per-page-link-active-background-color,
-					$pagination-active-bg
-				),
-			border-color:
+		before: (
+			border-radius:
 				var(
-					--pagination-items-per-page-link-active-border-color,
-					$pagination-active-border-color
+					--pagination-items-per-page-link-highlight-border-radius,
+					0 0 $border-radius $border-radius
 				),
-			color:
+			bottom: var(--pagination-items-per-page-link-highlight-bottom, 0),
+			content: '',
+			display: block,
+			left: var(--pagination-items-per-page-link-highlight-left, 0),
+			position:
 				var(
-					--pagination-items-per-page-link-active-color,
-					$pagination-active-color
+					--pagination-items-per-page-link-highlight-position,
+					absolute
 				),
+			right: 0,
+			top: var(--pagination-items-per-page-link-highlight-top, auto),
 		),
-		$pagination-items-per-page-link-active
-	);
 
-	$pagination-items-per-page-link-disabled: ();
-	$pagination-items-per-page-link-disabled: map-deep-merge(
-		(
-			background-color:
-				var(
-					--pagination-items-per-page-link-disabled-background-color,
-					$pagination-disabled-bg
-				),
-			border-color:
-				var(
-					--pagination-items-per-page-link-disabled-border-color,
-					$pagination-disabled-border-color
-				),
-			box-shadow: none,
-			color:
-				var(
-					--pagination-items-per-page-link-disabled-color,
-					$pagination-disabled-color
-				),
-			cursor: $pagination-disabled-cursor,
-			font-weight:
-				var(
-					--pagination-items-per-page-link-disabled-font-weight,
-					$font-weight-normal
-				),
-			opacity:
-				var(
-					--pagination-items-per-page-link-disabled-opacity,
-					$pagination-disabled-opacity
-				),
-			pointer-events: $pagination-disabled-pointer-events,
-			letter-spacing:
-				var(
-					--pagination-items-per-page-link-disabled-letter-spacing,
-					0.033em
-				),
-			before: (
-				content: none,
+		hover: $pagination-items-per-page-link-hover,
+
+		focus: $pagination-items-per-page-link-focus,
+
+		active: $pagination-items-per-page-link-active,
+
+		disabled: $pagination-items-per-page-link-disabled,
+
+		show: map-get($pagination-link, show),
+		lexicon-icon: (
+			margin-left: $pagination-items-per-page-lexicon-icon-margin-left,
+			margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
+		),
+	),
+	$pagination-items-per-page-link
+);
+
+// .pagination-items-per-page
+
+$pagination-items-per-page: () !default;
+$pagination-items-per-page: map-deep-merge(
+	(
+		font-size:
+			var(
+				--pagination-items-per-page-font-size,
+				$pagination-items-per-page-font-size
 			),
+		margin-bottom:
+			var(
+				--pagination-items-per-page-margin-bottom,
+				$pagination-margin-bottom
+			),
+		link: $pagination-items-per-page-link,
 
-			focus: (
-				after: (
-					content: none,
+		media-breakpoint-down: (
+			sm: (
+				pagination-results: (
+					margin-left: auto,
 				),
 			),
 		),
-		$pagination-items-per-page-link-disabled
-	);
+	),
+	$pagination-items-per-page
+);
+
+// .pagination-results
+
+$pagination-results-color: $pagination-color !default;
+
+$pagination-results: () !default;
+$pagination-results: map-deep-merge(
+	(
+		border-color: var(--pagination-results-border-color, transparent),
+		border-style: var(--pagination-results-border-style, solid),
+		border-width:
+			var(--pagination-results-border-width, $pagination-border-width),
+		color: var(--pagination-results-color, $pagination-results-color),
+		font-size: var(--pagination-results-font-size, $pagination-font-size),
+		line-height:
+			var(--pagination-results-line-height, $pagination-line-height),
+		margin-bottom:
+			var(--pagination-results-margin-bottom, $pagination-margin-bottom),
+		margin-right: var(--pagination-results-margin-right, auto),
+		max-width: var(--pagination-results-max-width, 100%),
+		padding:
+			var(
+				--pagination-results-padding,
+				$pagination-padding-y $pagination-padding-x
+			),
+		word-wrap: break-word,
+	),
+	$pagination-results
+);
 
-	$pagination-items-per-page-link: ();
-	$pagination-items-per-page-link: map-deep-merge(
-		(
-			align-items: center,
-			background-color:
-				var(
-					--pagination-items-per-page-link-background-color,
-					$pagination-items-per-page-bg
-				),
-			border-color:
-				var(
-					--pagination-items-per-page-link-border-color,
-					$pagination-items-per-page-border-color
-				),
-			border-radius:
-				var(
-					--pagination-items-per-page-link-border-radius,
-					$pagination-items-per-page-border-radius
-				),
-			border-style:
-				var(--pagination-items-per-page-link-border-style, solid),
-			border-width:
-				var(
-					--pagination-items-per-page-link-border-width,
-					$pagination-border-width
-				),
-			color:
+// @deprecated Pagination Sizes as of v3.146.0
+
+// .pagination-sm
+
+$pagination-font-size-sm: 12px !default; // 12px
+$pagination-line-height-sm: 1 !default;
+$pagination-padding-x-sm: 8px !default;
+$pagination-padding-y-sm: 0 !default;
+
+$pagination-item-height-sm: 24px !default; // 24px
+
+$pagination-link-border-radius-sm: 5px !default;
+
+$pagination-items-per-page-lexicon-icon-margin-left-sm: null !default;
+$pagination-items-per-page-lexicon-icon-margin-top-sm: null !default;
+
+$pagination-sm: () !default;
+$pagination-sm: map-deep-merge(
+	(
+		page-link: (
+			font-size:
 				var(
-					--pagination-items-per-page-link-color,
-					$pagination-items-per-page-color
+					--pagination-sm-page-link-font-size,
+					$pagination-font-size-sm
 				),
-			display: inline-flex,
 			height:
 				var(
-					--pagination-items-per-page-link-height,
-					$pagination-item-height
+					--pagination-sm-page-link-height,
+					$pagination-item-height-sm
 				),
-			justify-content: center,
-			letter-spacing:
-				var(--pagination-items-per-page-link-letter-spacing, 0.025em),
 			line-height:
 				var(
-					--pagination-items-per-page-link-line-height,
-					$pagination-line-height
+					--pagination-sm-page-link-line-height,
+					$pagination-line-height-sm
 				),
 			padding-bottom:
 				var(
-					--pagination-items-per-page-link-padding-bottom,
-					$pagination-padding-y
+					--pagination-sm-page-link-padding-bottom,
+					$pagination-padding-y-sm
 				),
-			padding-left:
+			padding-right:
 				var(
-					--pagination-items-per-page-link-padding-left,
-					$pagination-padding-x
+					--pagination-sm-page-link-padding-right,
+					$pagination-padding-x-sm
 				),
-			padding-right:
+			padding-left:
 				var(
-					--pagination-items-per-page-link-padding-right,
-					$pagination-padding-x
+					--pagination-sm-page-link-padding-left,
+					$pagination-padding-x-sm
 				),
 			padding-top:
 				var(
-					--pagination-items-per-page-link-padding-top,
-					$pagination-padding-y
+					--pagination-sm-page-link-padding-top,
+					$pagination-padding-y-sm
 				),
-			text-decoration: none,
-			transition: $pagination-items-per-page-transition,
-
-			before: (
-				border-radius:
-					var(
-						--pagination-items-per-page-link-highlight-border-radius,
-						0 0 $border-radius $border-radius
-					),
-				bottom:
-					var(--pagination-items-per-page-link-highlight-bottom, 0),
-				content: '',
-				display: block,
-				left: var(--pagination-items-per-page-link-highlight-left, 0),
-				position:
-					var(
-						--pagination-items-per-page-link-highlight-position,
-						absolute
-					),
-				right: 0,
-				top: var(--pagination-items-per-page-link-highlight-top, auto),
-			),
-
-			hover: $pagination-items-per-page-link-hover,
-
-			focus: $pagination-items-per-page-link-focus,
-
-			active: $pagination-items-per-page-link-active,
-
-			disabled: $pagination-items-per-page-link-disabled,
-
-			show: map-get($pagination-link, show),
-			lexicon-icon: (
-				margin-left:
-					$pagination-items-per-page-lexicon-icon-margin-left,
-				margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
-			),
 		),
-		$pagination-items-per-page-link
-	);
-
-	// .pagination-items-per-page
 
-	$pagination-items-per-page: ();
-	$pagination-items-per-page: map-deep-merge(
-		(
-			font-size:
+		page-link-first: (
+			border-bottom-left-radius:
 				var(
-					--pagination-items-per-page-font-size,
-					$pagination-items-per-page-font-size
+					--pagination-sm-page-link-first-border-bottom-left-radius,
+					$pagination-link-border-radius-sm
 				),
-			margin-bottom:
+			border-top-left-radius:
 				var(
-					--pagination-items-per-page-margin-bottom,
-					$pagination-margin-bottom
-				),
-			link: $pagination-items-per-page-link,
-
-			media-breakpoint-down: (
-				sm: (
-					pagination-results: (
-						margin-left: auto,
-					),
+					--pagination-sm-page-link-first-border-top-left-radius,
+					$pagination-link-border-radius-sm
 				),
-			),
 		),
-		$pagination-items-per-page
-	);
-
-	// .pagination-results
-
-	$pagination-results-color: $pagination-color;
 
-	$pagination-results: ();
-	$pagination-results: map-deep-merge(
-		(
-			border-color: var(--pagination-results-border-color, transparent),
-			border-style: var(--pagination-results-border-style, solid),
-			border-width:
-				var(
-					--pagination-results-border-width,
-					$pagination-border-width
-				),
-			color: var(--pagination-results-color, $pagination-results-color),
-			font-size:
-				var(--pagination-results-font-size, $pagination-font-size),
-			line-height:
-				var(--pagination-results-line-height, $pagination-line-height),
-			margin-bottom:
+		page-link-last: (
+			border-bottom-right-radius:
 				var(
-					--pagination-results-margin-bottom,
-					$pagination-margin-bottom
+					--pagination-sm-page-link-last-border-bottom-right-radius,
+					$pagination-link-border-radius-sm
 				),
-			margin-right: var(--pagination-results-margin-right, auto),
-			max-width: var(--pagination-results-max-width, 100%),
-			padding:
+			border-top-right-radius:
 				var(
-					--pagination-results-padding,
-					$pagination-padding-y $pagination-padding-x
+					--pagination-sm-page-link-last-border-top-right-radius,
+					$pagination-link-border-radius-sm
 				),
-			word-wrap: break-word,
 		),
-		$pagination-results
-	);
-
-	// @deprecated Pagination Sizes as of v3.146.0
-
-	// .pagination-sm
-
-	$pagination-font-size-sm: 12px; // 12px
-	$pagination-line-height-sm: 1;
-	$pagination-padding-x-sm: 8px;
-	$pagination-padding-y-sm: 0;
-
-	$pagination-item-height-sm: 24px; // 24px
-
-	$pagination-link-border-radius-sm: 5px;
 
-	$pagination-items-per-page-lexicon-icon-margin-left-sm: null;
-	$pagination-items-per-page-lexicon-icon-margin-top-sm: null;
-
-	$pagination-sm: ();
-	$pagination-sm: map-deep-merge(
-		(
-			page-link: (
+		pagination-items-per-page: (
+			border-radius:
+				var(
+					--pagination-sm-pagination-items-per-page-page-link-border-radius,
+					clay-enable-rounded($pagination-link-border-radius-sm)
+				),
+			link: (
 				font-size:
 					var(
-						--pagination-sm-page-link-font-size,
+						--pagination-sm-pagination-items-per-page-page-link-font-size,
 						$pagination-font-size-sm
 					),
 				height:
 					var(
-						--pagination-sm-page-link-height,
+						--pagination-sm-pagination-items-per-page-page-link-height,
 						$pagination-item-height-sm
 					),
 				line-height:
 					var(
-						--pagination-sm-page-link-line-height,
+						--pagination-sm-pagination-items-per-page-page-link-line-height,
 						$pagination-line-height-sm
 					),
 				padding-bottom:
 					var(
-						--pagination-sm-page-link-padding-bottom,
+						--pagination-sm-pagination-items-per-page-page-link-padding-bottom,
 						$pagination-padding-y-sm
 					),
-				padding-right:
+				padding-left:
 					var(
-						--pagination-sm-page-link-padding-right,
-						$pagination-padding-x-sm
+						--pagination-sm-pagination-items-per-page-page-link-padding-left,
+						$pagination-padding-x
 					),
-				padding-left:
+				padding-right:
 					var(
-						--pagination-sm-page-link-padding-left,
-						$pagination-padding-x-sm
+						--pagination-sm-pagination-items-per-page-page-link-padding-right,
+						$pagination-padding-x
 					),
 				padding-top:
 					var(
-						--pagination-sm-page-link-padding-top,
+						--pagination-sm-pagination-items-per-page-page-link-padding-top,
 						$pagination-padding-y-sm
 					),
 			),
 
-			page-link-first: (
-				border-bottom-left-radius:
-					var(
-						--pagination-sm-page-link-first-border-bottom-left-radius,
-						$pagination-link-border-radius-sm
-					),
-				border-top-left-radius:
-					var(
-						--pagination-sm-page-link-first-border-top-left-radius,
-						$pagination-link-border-radius-sm
-					),
+			lexicon-icon: (
+				margin-left:
+					$pagination-items-per-page-lexicon-icon-margin-left-sm,
+				margin-right:
+					$pagination-items-per-page-lexicon-icon-margin-top-sm,
 			),
 
-			page-link-last: (
-				border-bottom-right-radius:
+			pagination-results: (
+				font-size:
 					var(
-						--pagination-sm-page-link-last-border-bottom-right-radius,
-						$pagination-link-border-radius-sm
+						--pagination-sm-pagination-results-font-size,
+						$pagination-font-size-sm
 					),
-				border-top-right-radius:
+				line-height:
 					var(
-						--pagination-sm-page-link-last-border-top-right-radius,
-						$pagination-link-border-radius-sm
+						--pagination-sm-pagination-results-line-height,
+						$pagination-line-height-sm
 					),
-			),
-
-			pagination-items-per-page: (
-				border-radius:
+				padding:
 					var(
-						--pagination-sm-pagination-items-per-page-page-link-border-radius,
-						clay-enable-rounded($pagination-link-border-radius-sm)
+						--pagination-sm-pagination-results-padding,
+						$pagination-padding-y-sm $pagination-padding-x
 					),
-				link: (
-					font-size:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-font-size,
-							$pagination-font-size-sm
-						),
-					height:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-height,
-							$pagination-item-height-sm
-						),
-					line-height:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-line-height,
-							$pagination-line-height-sm
-						),
-					padding-bottom:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-padding-bottom,
-							$pagination-padding-y-sm
-						),
-					padding-left:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-padding-left,
-							$pagination-padding-x
-						),
-					padding-right:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-padding-right,
-							$pagination-padding-x
-						),
-					padding-top:
-						var(
-							--pagination-sm-pagination-items-per-page-page-link-padding-top,
-							$pagination-padding-y-sm
-						),
-				),
-
-				lexicon-icon: (
-					margin-left:
-						$pagination-items-per-page-lexicon-icon-margin-left-sm,
-					margin-right:
-						$pagination-items-per-page-lexicon-icon-margin-top-sm,
-				),
-
-				pagination-results: (
-					font-size:
-						var(
-							--pagination-sm-pagination-results-font-size,
-							$pagination-font-size-sm
-						),
-					line-height:
-						var(
-							--pagination-sm-pagination-results-line-height,
-							$pagination-line-height-sm
-						),
-					padding:
-						var(
-							--pagination-sm-pagination-results-padding,
-							$pagination-padding-y-sm $pagination-padding-x
-						),
-				),
 			),
 		),
-		$pagination-sm
-	);
+	),
+	$pagination-sm
+);
 
-	// .pagination-lg
+// .pagination-lg
 
-	$pagination-font-size-lg: 18px; // 18px
-	$pagination-line-height-lg: 1;
-	$pagination-padding-x-lg: 16px; // 16px
-	$pagination-padding-y-lg: 0;
+$pagination-font-size-lg: 18px !default; // 18px
+$pagination-line-height-lg: 1 !default;
+$pagination-padding-x-lg: 16px !default; // 16px
+$pagination-padding-y-lg: 0 !default;
 
-	$pagination-item-height-lg: 44px; //44px
+$pagination-item-height-lg: 44px !default; //44px
 
-	$pagination-link-border-radius-lg: 5px; // 5px
+$pagination-link-border-radius-lg: 5px !default; // 5px
+
+$pagination-items-per-page-lexicon-icon-margin-left-lg: null !default;
+$pagination-items-per-page-lexicon-icon-margin-top-lg: null !default;
+
+$pagination-lg: () !default;
+$pagination-lg: map-deep-merge(
+	(
+		page-link: (
+			font-size:
+				var(
+					--pagination-lg-page-link-font-size,
+					$pagination-font-size-lg
+				),
+			height:
+				var(
+					--pagination-lg-page-link-height,
+					$pagination-item-height-lg
+				),
+			line-height:
+				var(
+					--pagination-lg-page-link-line-height,
+					$pagination-line-height-lg
+				),
+			padding-bottom:
+				var(
+					--pagination-lg-page-link-padding-bottom,
+					$pagination-padding-y-lg
+				),
+			padding-left:
+				var(
+					--pagination-lg-page-link-padding-left,
+					$pagination-padding-x-lg
+				),
+			padding-right:
+				var(
+					--pagination-lg-page-link-padding-right,
+					$pagination-padding-x-lg
+				),
+			padding-top:
+				var(
+					--pagination-lg-page-link-padding-top,
+					$pagination-padding-y-lg
+				),
+		),
+
+		page-link-first: (
+			border-bottom-left-radius:
+				var(
+					--pagination-lg-page-link-first-border-bottom-left-radius,
+					$pagination-link-border-radius-lg
+				),
+			border-top-left-radius:
+				var(
+					--pagination-lg-page-link-first-border-top-left-radius,
+					$pagination-link-border-radius-lg
+				),
+		),
 
-	$pagination-items-per-page-lexicon-icon-margin-left-lg: null;
-	$pagination-items-per-page-lexicon-icon-margin-top-lg: null;
+		page-link-last: (
+			border-bottom-right-radius:
+				var(
+					--pagination-lg-page-link-last-border-bottom-right-radius,
+					$pagination-link-border-radius-lg
+				),
+			border-top-right-radius:
+				var(
+					--pagination-lg-page-link-last-border-top-right-radius,
+					$pagination-link-border-radius-lg
+				),
+		),
 
-	$pagination-lg: ();
-	$pagination-lg: map-deep-merge(
-		(
-			page-link: (
+		pagination-items-per-page: (
+			border-radius:
+				var(
+					--pagination-lg-pagination-items-per-page-page-link-border-radius,
+					clay-enable-rounded($pagination-link-border-radius-lg)
+				),
+			link: (
 				font-size:
 					var(
-						--pagination-lg-page-link-font-size,
+						--pagination-lg-pagination-items-per-page-page-link-font-size,
 						$pagination-font-size-lg
 					),
 				height:
 					var(
-						--pagination-lg-page-link-height,
+						--pagination-lg-pagination-items-per-page-page-link-height,
 						$pagination-item-height-lg
 					),
 				line-height:
 					var(
-						--pagination-lg-page-link-line-height,
+						--pagination-lg-pagination-items-per-page-page-link-line-height,
 						$pagination-line-height-lg
 					),
 				padding-bottom:
 					var(
-						--pagination-lg-page-link-padding-bottom,
+						--pagination-lg-pagination-items-per-page-page-link-padding-bottom,
 						$pagination-padding-y-lg
 					),
 				padding-left:
 					var(
-						--pagination-lg-page-link-padding-left,
-						$pagination-padding-x-lg
+						--pagination-lg-pagination-items-per-page-page-link-padding-left,
+						$pagination-padding-x
 					),
 				padding-right:
 					var(
-						--pagination-lg-page-link-padding-right,
-						$pagination-padding-x-lg
+						--pagination-lg-pagination-items-per-page-page-link-padding-right,
+						$pagination-padding-x
 					),
 				padding-top:
 					var(
-						--pagination-lg-page-link-padding-top,
+						--pagination-lg-pagination-items-per-page-page-link-padding-top,
 						$pagination-padding-y-lg
 					),
 			),
 
-			page-link-first: (
-				border-bottom-left-radius:
-					var(
-						--pagination-lg-page-link-first-border-bottom-left-radius,
-						$pagination-link-border-radius-lg
-					),
-				border-top-left-radius:
-					var(
-						--pagination-lg-page-link-first-border-top-left-radius,
-						$pagination-link-border-radius-lg
-					),
+			lexicon-icon: (
+				margin-left:
+					$pagination-items-per-page-lexicon-icon-margin-left-lg,
+				margin-right:
+					$pagination-items-per-page-lexicon-icon-margin-top-lg,
 			),
 
-			page-link-last: (
-				border-bottom-right-radius:
+			pagination-results: (
+				font-size:
 					var(
-						--pagination-lg-page-link-last-border-bottom-right-radius,
-						$pagination-link-border-radius-lg
+						--pagination-lg-pagination-results-font-size,
+						$pagination-font-size-lg
 					),
-				border-top-right-radius:
+				line-height:
 					var(
-						--pagination-lg-page-link-last-border-top-right-radius,
-						$pagination-link-border-radius-lg
+						--pagination-lg-pagination-results-line-height,
+						$pagination-line-height-lg
 					),
-			),
-
-			pagination-items-per-page: (
-				border-radius:
+				padding:
 					var(
-						--pagination-lg-pagination-items-per-page-page-link-border-radius,
-						clay-enable-rounded($pagination-link-border-radius-lg)
+						--pagination-lg-pagination-results-padding,
+						$pagination-padding-y-lg $pagination-padding-x
 					),
-				link: (
-					font-size:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-font-size,
-							$pagination-font-size-lg
-						),
-					height:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-height,
-							$pagination-item-height-lg
-						),
-					line-height:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-line-height,
-							$pagination-line-height-lg
-						),
-					padding-bottom:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-padding-bottom,
-							$pagination-padding-y-lg
-						),
-					padding-left:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-padding-left,
-							$pagination-padding-x
-						),
-					padding-right:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-padding-right,
-							$pagination-padding-x
-						),
-					padding-top:
-						var(
-							--pagination-lg-pagination-items-per-page-page-link-padding-top,
-							$pagination-padding-y-lg
-						),
-				),
-
-				lexicon-icon: (
-					margin-left:
-						$pagination-items-per-page-lexicon-icon-margin-left-lg,
-					margin-right:
-						$pagination-items-per-page-lexicon-icon-margin-top-lg,
-				),
-
-				pagination-results: (
-					font-size:
-						var(
-							--pagination-lg-pagination-results-font-size,
-							$pagination-font-size-lg
-						),
-					line-height:
-						var(
-							--pagination-lg-pagination-results-line-height,
-							$pagination-line-height-lg
-						),
-					padding:
-						var(
-							--pagination-lg-pagination-results-padding,
-							$pagination-padding-y-lg $pagination-padding-x
-						),
-				),
 			),
 		),
-		$pagination-lg
-	);
-}
+	),
+	$pagination-lg
+);