@clayui/css 3.161.0 → 3.163.0

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

@@ -1,567 +1,554 @@
-@if ($enable-atlas-custom-properties) {
-	$panel-bg: var(--panel-background-color, $white);
-	$panel-border-color: var(--panel-border-color, transparent);
-	$panel-border-radius: var(--panel-border-radius, $border-radius);
-	$panel-border-style: var(--panel-border-style, solid);
-
-	$panel-border-bottom-width: var(--panel-border-bottom-width, 1px);
-	$panel-border-left-width: var(--panel-border-left-width, 1px);
-	$panel-border-right-width: var(--panel-border-right-width, 1px);
-	$panel-border-top-width: var(--panel-border-top-width, 1px);
-
-	$panel-border-width: $panel-border-top-width
-		$panel-border-right-width
-		$panel-border-bottom-width
-		$panel-border-left-width;
-
-	$panel-box-shadow: var(--panel-box-shadow, none);
-	$panel-margin-bottom: var(--panel-margin-bottom, $spacer);
-
-	// Panel Header
-
-	$panel-header-border-bottom-width: var(
-		--panel-header-border-bottom-width,
-		0
-	);
-
-	$panel-header-offset-border-radius: var(
-		--panel-header-offset-border-radius,
-		calc(#{$panel-border-radius} - #{$panel-border-top-width})
-	);
-
-	$panel-header-font-size: var(--panel-header-font-size, 14px);
-	$panel-header-line-height: var(
-		--panel-header-line-height,
-		$headings-line-height
-	);
-	$panel-header-padding-x: var(--panel-header-padding-x, 20px);
-	$panel-header-padding-y: var(--panel-header-padding-y, 12px);
-
-	$panel-header-collapse-icon-font-size: var(
-		--panel-header-collapse-icon-font-size,
-		12px
-	);
-
-	$panel-header-collapse-icon-bottom: var(
-		--panel-header-collapse-icon-bottom,
-		auto
-	);
-	$panel-header-collapse-icon-left: var(
-		--panel-header-collapse-icon-left,
-		auto
-	);
-	$panel-header-collapse-icon-right: var(
-		--panel-header-collapse-icon-right,
-		auto
-	);
-	$panel-header-collapse-icon-top: var(
-		--panel-header-collapse-icon-top,
-		clay-collapse-icon-align(
-			$panel-header-padding-y,
-			0,
-			1em,
-			$panel-header-line-height
-		)
-	);
-
-	$panel-header-collapse-icon-padding-left: var(
-		--panel-header-collapse-icon-padding-left,
-		20px
-	);
-	$panel-header-collapse-icon-padding-right: var(
-		--panel-header-collapse-icon-padding-right,
-		45px
-	);
-
-	$panel-header-link-text-decoration: none;
-
-	$panel-header-link-hover-text-decoration: none;
-
-	$panel-header-link: ();
-	$panel-header-link: map-deep-merge(
-		(
-			color: var(--panel-header-link-color, inherit),
-			display: block,
+$panel-bg: var(--panel-background-color, $white) !default;
+$panel-border-color: var(--panel-border-color, transparent) !default;
+$panel-border-radius: var(--panel-border-radius, $border-radius) !default;
+$panel-border-style: var(--panel-border-style, solid) !default;
+
+$panel-border-bottom-width: var(--panel-border-bottom-width, 1px) !default;
+$panel-border-left-width: var(--panel-border-left-width, 1px) !default;
+$panel-border-right-width: var(--panel-border-right-width, 1px) !default;
+$panel-border-top-width: var(--panel-border-top-width, 1px) !default;
+
+$panel-border-width: $panel-border-top-width $panel-border-right-width
+	$panel-border-bottom-width $panel-border-left-width !default;
+
+$panel-box-shadow: var(--panel-box-shadow, none) !default;
+$panel-margin-bottom: var(--panel-margin-bottom, $spacer) !default;
+
+// Panel Header
+
+$panel-header-border-bottom-width: var(
+	--panel-header-border-bottom-width,
+	0
+) !default;
+
+$panel-header-offset-border-radius: var(
+	--panel-header-offset-border-radius,
+	calc(#{$panel-border-radius} - #{$panel-border-top-width})
+) !default;
+
+$panel-header-font-size: var(--panel-header-font-size, 14px) !default;
+$panel-header-line-height: var(
+	--panel-header-line-height,
+	$headings-line-height
+) !default;
+$panel-header-padding-x: var(--panel-header-padding-x, 20px) !default;
+$panel-header-padding-y: var(--panel-header-padding-y, 12px) !default;
+
+$panel-header-collapse-icon-font-size: var(
+	--panel-header-collapse-icon-font-size,
+	12px
+) !default;
+
+$panel-header-collapse-icon-bottom: var(
+	--panel-header-collapse-icon-bottom,
+	auto
+) !default;
+$panel-header-collapse-icon-left: var(
+	--panel-header-collapse-icon-left,
+	auto
+) !default;
+$panel-header-collapse-icon-right: var(
+	--panel-header-collapse-icon-right,
+	auto
+) !default;
+$panel-header-collapse-icon-top: var(
+	--panel-header-collapse-icon-top,
+	clay-collapse-icon-align(
+		$panel-header-padding-y,
+		0,
+		1em,
+		$panel-header-line-height
+	)
+) !default;
+
+$panel-header-collapse-icon-padding-left: var(
+	--panel-header-collapse-icon-padding-left,
+	20px
+) !default;
+$panel-header-collapse-icon-padding-right: var(
+	--panel-header-collapse-icon-padding-right,
+	45px
+) !default;
+
+$panel-header-link-text-decoration: none !default;
+
+$panel-header-link-hover-text-decoration: none !default;
+
+$panel-header-link: () !default;
+$panel-header-link: map-deep-merge(
+	(
+		color: var(--panel-header-link-color, inherit),
+		display: block,
+		text-decoration:
+			var(
+				--panel-header-link-text-decoration,
+				$panel-header-link-text-decoration
+			),
+		transition: box-shadow 0.15s ease-in-out,
+
+		hover: (
+			color: var(--panel-header-link-hover-color, inherit),
 			text-decoration:
 				var(
-					--panel-header-link-text-decoration,
-					$panel-header-link-text-decoration
+					--panel-header-link-hover-text-decoration,
+					$panel-header-link-hover-text-decoration
 				),
-			transition: box-shadow 0.15s ease-in-out,
-
-			hover: (
-				color: var(--panel-header-link-hover-color, inherit),
-				text-decoration:
-					var(
-						--panel-header-link-hover-text-decoration,
-						$panel-header-link-hover-text-decoration
-					),
-			),
+		),
 
-			focus: (
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-				z-index: $zindex-panel-header-link-focus,
-			),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+			z-index: $zindex-panel-header-link-focus,
 		),
-		$panel-header-link
-	);
-
-	$panel-header-collapsed-link: ();
-	$panel-header-collapsed-link: map-deep-merge(
-		(
-			border-color: transparent,
-			transition: border-color 0.75s ease,
+	),
+	$panel-header-link
+);
+
+$panel-header-collapsed-link: () !default;
+$panel-header-collapsed-link: map-deep-merge(
+	(
+		border-color: transparent,
+		transition: border-color 0.75s ease,
+	),
+	$panel-header-collapsed-link
+);
+
+// Panel Body
+$panel-body-padding-x: var(--panel-body-panel-body-padding-x, 20px) !default;
+$panel-body-padding-y: var(--panel-body-panel-body-padding-y, 12px) !default;
+
+// Panel Footer
+
+$panel-footer-border-top-width: var(
+	--panel-footer-panel-footer-border-top-width,
+	0
+) !default;
+$panel-footer-offset-border-radius: var(
+	--panel-footer-offset-border-radius,
+	calc(#{$panel-border-radius} - #{$panel-border-bottom-width})
+) !default;
+$panel-footer-padding-x: var(
+	--panel-footer-padding-x,
+	$panel-header-padding-x
+) !default;
+$panel-footer-padding-y: var(
+	--panel-footer-padding-y,
+	$panel-header-padding-y
+) !default;
+
+// Panel Title
+
+$panel-title-font-size: var(--panel-title-font-size, 14px) !default;
+$panel-title-font-weight: var(
+	--panel-title-font-weight,
+	$font-weight-semi-bold
+) !default;
+$panel-title-text-transform: var(
+	--panel-title-text-transform,
+	uppercase
+) !default;
+
+// Panel Title Small Element
+
+$panel-title-small-font-size: var(--panel-title-small-font-size, 100%) !default;
+$panel-title-small-margin-left: var(
+	--panel-title-small-margin-left,
+	6px
+) !default;
+
+$panel: () !default;
+$panel: map-deep-merge(
+	(
+		background-color: $panel-bg,
+		border-color: $panel-border-color,
+		border-radius: clay-enable-rounded($panel-border-radius),
+		border-style: $panel-border-style,
+		border-width: $panel-border-width,
+		box-shadow: clay-enable-shadows($panel-box-shadow),
+		margin-bottom: $panel-margin-bottom,
+		word-wrap: break-word,
+
+		collapse-icon-middle: (
+			collapse-icon: (
+				font-size: inherit,
+			),
 		),
-		$panel-header-collapsed-link
-	);
-
-	// Panel Body
-	$panel-body-padding-x: var(--panel-body-panel-body-padding-x, 20px);
-	$panel-body-padding-y: var(--panel-body-panel-body-padding-y, 12px);
-
-	// Panel Footer
-
-	$panel-footer-border-top-width: var(
-		--panel-footer-panel-footer-border-top-width,
-		0
-	);
-	$panel-footer-offset-border-radius: var(
-		--panel-footer-offset-border-radius,
-		calc(#{$panel-border-radius} - #{$panel-border-bottom-width})
-	);
-	$panel-footer-padding-x: var(
-		--panel-footer-padding-x,
-		$panel-header-padding-x
-	);
-	$panel-footer-padding-y: var(
-		--panel-footer-padding-y,
-		$panel-header-padding-y
-	);
-
-	// Panel Title
-
-	$panel-title-font-size: var(--panel-title-font-size, 14px);
-	$panel-title-font-weight: var(
-		--panel-title-font-weight,
-		$font-weight-semi-bold
-	);
-	$panel-title-text-transform: var(--panel-title-text-transform, uppercase);
-
-	// Panel Title Small Element
-
-	$panel-title-small-font-size: var(--panel-title-small-font-size, 100%);
-	$panel-title-small-margin-left: var(--panel-title-small-margin-left, 6px);
-
-	$panel: ();
-	$panel: map-deep-merge(
-		(
-			background-color: $panel-bg,
-			border-color: $panel-border-color,
-			border-radius: clay-enable-rounded($panel-border-radius),
-			border-style: $panel-border-style,
-			border-width: $panel-border-width,
-			box-shadow: clay-enable-shadows($panel-box-shadow),
-			margin-bottom: $panel-margin-bottom,
-			word-wrap: break-word,
 
-			collapse-icon-middle: (
-				collapse-icon: (
-					font-size: inherit,
-				),
-			),
+		panel-header: (
+			border-bottom: $panel-header-border-bottom-width solid transparent,
+			border-top-left-radius:
+				clay-enable-rounded($panel-header-offset-border-radius),
+			border-top-right-radius:
+				clay-enable-rounded($panel-header-offset-border-radius),
+			display: block,
+			font-size: $panel-header-font-size,
+			line-height: $panel-header-line-height,
+			padding: $panel-header-padding-y $panel-header-padding-x,
+			position: relative,
+			width: 100%,
 
-			panel-header: (
-				border-bottom:
-					$panel-header-border-bottom-width
-					solid
-					transparent,
-				border-top-left-radius:
+			collapsed: (
+				border-bottom-left-radius:
 					clay-enable-rounded($panel-header-offset-border-radius),
-				border-top-right-radius:
+				border-bottom-right-radius:
 					clay-enable-rounded($panel-header-offset-border-radius),
-				display: block,
-				font-size: $panel-header-font-size,
-				line-height: $panel-header-line-height,
-				padding: $panel-header-padding-y $panel-header-padding-x,
-				position: relative,
-				width: 100%,
-
-				collapsed: (
-					border-bottom-left-radius:
-						clay-enable-rounded($panel-header-offset-border-radius),
-					border-bottom-right-radius:
-						clay-enable-rounded($panel-header-offset-border-radius),
-					link: $panel-header-collapsed-link,
-				),
-
-				collapse-icon: (
-					padding-left: $panel-header-collapse-icon-padding-left,
-					padding-right: $panel-header-collapse-icon-padding-right,
-				),
-
-				link: $panel-header-link,
-			),
-
-			panel-body: (
-				padding: $panel-body-padding-y $panel-body-padding-x,
+				link: $panel-header-collapsed-link,
 			),
 
-			panel-footer: (
-				border-bottom-left-radius:
-					clay-enable-rounded($panel-footer-offset-border-radius),
-				border-bottom-right-radius:
-					clay-enable-rounded($panel-footer-offset-border-radius),
-				border-top: $panel-footer-border-top-width solid transparent,
-				padding: $panel-footer-padding-y $panel-footer-padding-x,
+			collapse-icon: (
+				padding-left: $panel-header-collapse-icon-padding-left,
+				padding-right: $panel-header-collapse-icon-padding-right,
 			),
 
-			panel-title: (
-				font-size: $panel-title-font-size,
-				font-weight: $panel-title-font-weight,
-				text-transform: $panel-title-text-transform,
-
-				small: (
-					font-size: $panel-title-small-font-size,
-					margin-left: $panel-title-small-margin-left,
-				),
-			),
+			link: $panel-header-link,
 		),
-		$panel
-	);
-
-	// Panel Group
 
-	$panel-group-panel-margin-bottom: var(
-		--panel-group-panel-margin-bottom,
-		calc(#{$panel-border-bottom-width} * -1)
-	);
+		panel-body: (
+			padding: $panel-body-padding-y $panel-body-padding-x,
+		),
 
-	$panel-group-panel-unstyled: ();
-	$panel-group-panel-unstyled: map-deep-merge(
-		(
-			margin-bottom:
-				var(--panel-group-panel-unstyled-margin-bottom, 24px),
+		panel-footer: (
+			border-bottom-left-radius:
+				clay-enable-rounded($panel-footer-offset-border-radius),
+			border-bottom-right-radius:
+				clay-enable-rounded($panel-footer-offset-border-radius),
+			border-top: $panel-footer-border-top-width solid transparent,
+			padding: $panel-footer-padding-y $panel-footer-padding-x,
 		),
-		$panel-group-panel-unstyled
-	);
 
-	// Panel Group Sm
+		panel-title: (
+			font-size: $panel-title-font-size,
+			font-weight: $panel-title-font-weight,
+			text-transform: $panel-title-text-transform,
 
-	$panel-group-sm: ();
-	$panel-group-sm: map-deep-merge(
-		(
-			font-size: var(--panel-group-sm-font-size, 0.875rem),
-			panel-header: (
-				padding-bottom:
-					var(--panel-group-sm-panel-header-padding-bottom, 0.5rem),
-				padding-top:
-					var(--panel-group-sm-panel-header-padding-top, 0.5rem),
+			small: (
+				font-size: $panel-title-small-font-size,
+				margin-left: $panel-title-small-margin-left,
 			),
+		),
+	),
+	$panel
+);
+
+// Panel Group
+
+$panel-group-panel-margin-bottom: var(
+	--panel-group-panel-margin-bottom,
+	calc(#{$panel-border-bottom-width} * -1)
+) !default;
+
+$panel-group-panel-unstyled: () !default;
+$panel-group-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: var(--panel-group-panel-unstyled-margin-bottom, 24px),
+	),
+	$panel-group-panel-unstyled
+) !default;
+
+// Panel Group Sm
+
+$panel-group-sm: () !default;
+$panel-group-sm: map-deep-merge(
+	(
+		font-size: var(--panel-group-sm-font-size, 0.875rem),
+		panel-header: (
+			padding-bottom:
+				var(--panel-group-sm-panel-header-padding-bottom, 0.5rem),
+			padding-top: var(--panel-group-sm-panel-header-padding-top, 0.5rem),
+		),
 
-			panel-title: (
-				font-size:
-					var(--panel-group-sm-panel-title-font-size, 0.875rem),
-			),
+		panel-title: (
+			font-size: var(--panel-group-sm-panel-title-font-size, 0.875rem),
+		),
 
-			collapse-icon: (
-				top:
-					var(
-						--panel-group-sm-panel-header-collapse-icon-top,
-						0.6875rem
-					),
-			),
+		collapse-icon: (
+			top: var(--panel-group-sm-panel-header-collapse-icon-top, 0.6875rem),
+		),
+	),
+	$panel-group-sm
+);
+
+$panel-group-sm-panel-unstyled: () !default;
+$panel-group-sm-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: var(--panel-group-sm-panel-unstyled-margin-bottom, 1rem),
+	),
+	$panel-group-sm-panel-unstyled
+);
+
+// Panel Group Flush
+
+$panel-group-flush-body-margin-bottom: var(
+	--panel-group-flush-body-margin-bottom,
+	24px
+) !default;
+$panel-group-flush-body-padding: var(
+	--panel-group-flush-body-padding,
+	0px
+) !default;
+
+$panel-group-flush-collapse-icon-left: var(
+	--panel-group-flush-collapse-icon-left,
+	auto
+) !default;
+$panel-group-flush-collapse-icon-right: var(
+	--panel-group-flush-collapse-icon-right,
+	0px
+) !default;
+
+$panel-group-flush-collapse-icon-padding-left: var(
+	--panel-group-flush-collapse-icon-padding-left,
+	0px
+) !default;
+$panel-group-flush-collapse-icon-padding-right: var(
+	--panel-group-flush-collapse-icon-padding-right,
+	24px
+) !default;
+
+$panel-group-flush-panel-unstyled: () !default;
+$panel-group-flush-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: 1.5rem,
+
+		panel-body: (
+			margin-bottom: 0rem,
 		),
-		$panel-group-sm
-	);
-
-	$panel-group-sm-panel-unstyled: ();
-	$panel-group-sm-panel-unstyled: map-deep-merge(
-		(
-			margin-bottom:
-				var(--panel-group-sm-panel-unstyled-margin-bottom, 1rem),
+	),
+	$panel-group-flush-panel-unstyled
+);
+
+// Panel Variants
+
+$panel-secondary-header-link: () !default;
+
+$panel-secondary: () !default;
+$panel-secondary: map-deep-merge(
+	(
+		border-color: var(--panel-secondary-border-color, $gray-300),
+		color: var(--panel-secondary-color, $gray-600),
+		panel-header: (
+			border-color:
+				var(--panel-secondary-panel-header-border-color, $gray-300),
+			link: $panel-secondary-header-link,
 		),
-		$panel-group-sm-panel-unstyled
-	);
-
-	// Panel Group Flush
-
-	$panel-group-flush-body-margin-bottom: var(
-		--panel-group-flush-body-margin-bottom,
-		24px
-	);
-	$panel-group-flush-body-padding: var(--panel-group-flush-body-padding, 0px);
-
-	$panel-group-flush-collapse-icon-left: var(
-		--panel-group-flush-collapse-icon-left,
-		auto
-	);
-	$panel-group-flush-collapse-icon-right: var(
-		--panel-group-flush-collapse-icon-right,
-		0px
-	);
-
-	$panel-group-flush-collapse-icon-padding-left: var(
-		--panel-group-flush-collapse-icon-padding-left,
-		0px
-	);
-	$panel-group-flush-collapse-icon-padding-right: var(
-		--panel-group-flush-collapse-icon-padding-right,
-		24px
-	);
-
-	$panel-group-flush-panel-unstyled: ();
-	$panel-group-flush-panel-unstyled: map-deep-merge(
-		(
-			margin-bottom: 1.5rem,
 
-			panel-body: (
-				margin-bottom: 0rem,
-			),
+		panel-footer: (
+			border-color:
+				var(--panel-secondary-panel-footer-border-color, $gray-300),
 		),
-		$panel-group-flush-panel-unstyled
-	);
+	),
+	$panel-secondary
+);
 
-	// Panel Variants
+// Panel Unstyled
 
-	$panel-secondary-header-link: ();
+$panel-unstyled-header-link: () !default;
+$panel-unstyled-header-link: map-deep-merge(
+	(
+		border-radius: 1px,
 
-	$panel-secondary: ();
-	$panel-secondary: map-deep-merge(
-		(
-			border-color: var(--panel-secondary-border-color, $gray-300),
-			color: var(--panel-secondary-color, $gray-600),
-			panel-header: (
+		focus: (
+			box-shadow: #{0 0 0 4px $body-bg,
+			0 0 0 6px $primary-l0},
+		),
+	),
+	$panel-unstyled-header-link
+);
+
+$panel-unstyled: () !default;
+$panel-unstyled: map-deep-merge(
+	(
+		background-color: var(--panel-unstyled-background-color, transparent),
+		border-radius: var(--panel-unstyled-border-radius, 0),
+		border-width: var(--panel-unstyled-border-width, 0),
+		margin-bottom: var(--panel-unstyled-margin-bottom, 24px),
+		panel-header: (
+			border-color:
+				var(--panel-unstyled-panel-header-border-color, $gray-500),
+			border-radius: var(--panel-unstyled-panel-header-border-radius, 0),
+			border-style: var(--panel-unstyled-panel-header-border-style, solid),
+			border-width:
+				var(--panel-unstyled-panel-header-border-width, 0 0 1px 0),
+			padding-left: var(--panel-unstyled-panel-header-padding-left, 0),
+			collapsed: (
 				border-color:
-					var(--panel-secondary-panel-header-border-color, $gray-300),
-				link: $panel-secondary-header-link,
+					var(
+						--panel-unstyled-panel-header-collapsed-border-color,
+						$gray-500
+					),
 			),
 
-			panel-footer: (
-				border-color:
-					var(--panel-secondary-panel-footer-border-color, $gray-300),
-			),
+			link: $panel-unstyled-header-link,
+		),
+
+		collapse-icon: (
+			right: var(--panel-unstyled-panel-header-collapse-icon-right, 0),
+		),
+
+		panel-body: (
+			padding: var(--panel-unstyled-panel-body-padding, 16px 0 0.1px 0),
 		),
-		$panel-secondary
-	);
 
-	// Panel Unstyled
+		panel-footer: (
+			padding: var(--panel-unstyled-panel-footer-padding, 16px 0 0.1px 0),
+		),
+	),
+	$panel-unstyled
+);
 
-	$panel-unstyled-header-link: ();
-	$panel-unstyled-header-link: map-deep-merge(
-		(
-			border-radius: 1px,
+$panel-palette: () !default;
+$panel-palette: map-deep-merge(
+	(
+		panel-block: (
+			border-color: $gray-400,
 
-			focus: (
-				box-shadow: #{0 0 0 4px $body-bg,
-				0 0 0 6px $primary-l0},
+			collapse-icon: (
+				font-size: inherit,
+				top: 1.3125rem,
 			),
-		),
-		$panel-unstyled-header-link
-	);
-
-	$panel-unstyled: ();
-	$panel-unstyled: map-deep-merge(
-		(
-			background-color:
-				var(--panel-unstyled-background-color, transparent),
-			border-radius: var(--panel-unstyled-border-radius, 0),
-			border-width: var(--panel-unstyled-border-width, 0),
-			margin-bottom: var(--panel-unstyled-margin-bottom, 24px),
+
 			panel-header: (
-				border-color:
-					var(--panel-unstyled-panel-header-border-color, $gray-500),
-				border-radius:
-					var(--panel-unstyled-panel-header-border-radius, 0),
-				border-style:
-					var(--panel-unstyled-panel-header-border-style, solid),
-				border-width:
-					var(--panel-unstyled-panel-header-border-width, 0 0 1px 0),
-				padding-left:
-					var(--panel-unstyled-panel-header-padding-left, 0),
-				collapsed: (
-					border-color:
-						var(
-							--panel-unstyled-panel-header-collapsed-border-color,
-							$gray-500
-						),
-				),
+				font-size: 1.25rem,
+				line-height: 1.25,
+				padding: 1.15625rem 1.25rem,
 
-				link: $panel-unstyled-header-link,
+				'&.collapse-icon': (
+					padding-right: 3rem,
+				),
 			),
 
-			collapse-icon: (
-				right:
-					var(--panel-unstyled-panel-header-collapse-icon-right, 0),
+			panel-title: (
+				font-size: inherit,
+				text-transform: none,
 			),
 
 			panel-body: (
-				padding:
-					var(--panel-unstyled-panel-body-padding, 16px 0 0.1px 0),
+				padding: 0rem 1.25rem 1.25rem,
 			),
 
 			panel-footer: (
-				padding:
-					var(--panel-unstyled-panel-footer-padding, 16px 0 0.1px 0),
+				padding: 0rem 1.25rem 1.25rem,
 			),
 		),
-		$panel-unstyled
-	);
 
-	$panel-palette: ();
-	$panel-palette: map-deep-merge(
-		(
-			panel-block: (
-				border-color: $gray-400,
+		panel-default: (
+			border-width: 0px,
 
-				collapse-icon: (
-					font-size: inherit,
-					top: 1.3125rem,
-				),
-
-				panel-header: (
-					font-size: 1.25rem,
-					line-height: 1.25,
-					padding: 1.15625rem 1.25rem,
-
-					'&.collapse-icon': (
-						padding-right: 3rem,
-					),
-				),
-
-				panel-title: (
-					font-size: inherit,
-					text-transform: none,
-				),
-
-				panel-body: (
-					padding: 0rem 1.25rem 1.25rem,
+			panel-header: (
+				border-radius: clay-enable-rounded(0),
+				color: $gray-600,
+				font-size: 0.875rem,
+				line-height: 1.125rem,
+				padding-bottom: 0.40625rem,
+				padding-left: 0rem,
+				padding-right: 0rem,
+				padding-top: 0.40625rem,
+				text-transform: uppercase,
+
+				'&.collapse-icon': (
+					padding-right: 1.75rem,
 				),
 
-				panel-footer: (
-					padding: 0rem 1.25rem 1.25rem,
+				link: (
+					border-bottom: 1px solid $gray-400,
 				),
 			),
 
-			panel-default: (
-				border-width: 0px,
-
-				panel-header: (
-					border-radius: clay-enable-rounded(0),
-					color: $gray-600,
-					font-size: 0.875rem,
-					line-height: 1.125rem,
-					padding-bottom: 0.40625rem,
-					padding-left: 0rem,
-					padding-right: 0rem,
-					padding-top: 0.40625rem,
-					text-transform: uppercase,
-
-					'&.collapse-icon': (
-						padding-right: 1.75rem,
-					),
-
-					link: (
-						border-bottom: 1px solid $gray-400,
-					),
-				),
+			collapse-icon: (
+				font-size: inherit,
+				right: 0rem,
+				top: 0.5rem,
+			),
 
+			collapse-icon-middle: (
 				collapse-icon: (
-					font-size: inherit,
 					right: 0rem,
-					top: 0.5rem,
-				),
-
-				collapse-icon-middle: (
-					collapse-icon: (
-						right: 0rem,
-					),
 				),
+			),
 
-				panel-body: (
-					padding: 1.25rem 0rem,
-				),
+			panel-body: (
+				padding: 1.25rem 0rem,
+			),
 
-				panel-title: (
-					font-size: inherit,
-				),
+			panel-title: (
+				font-size: inherit,
+			),
 
-				panel-footer: (
-					padding: 1.25rem 0rem,
-				),
+			panel-footer: (
+				padding: 1.25rem 0rem,
 			),
 		),
-		$panel-palette
-	);
+	),
+	$panel-palette
+);
 
-	// Panel Sizes
+// Panel Sizes
 
-	$panel-sizes: ();
-	$panel-sizes: map-deep-merge(
-		(
-			'.panel-lg.panel-block': (
-				collapse-icon: (
-					top: 1.75rem,
-				),
+$panel-sizes: () !default;
+$panel-sizes: map-deep-merge(
+	(
+		'.panel-lg.panel-block': (
+			collapse-icon: (
+				top: 1.75rem,
+			),
 
-				panel-header: (
-					font-size: 1.5rem,
-					padding: 1.5rem 1.5rem,
+			panel-header: (
+				font-size: 1.5rem,
+				padding: 1.5rem 1.5rem,
 
-					'&.collapse-icon': (
-						padding-right: calc(1.5rem * 3),
-					),
+				'&.collapse-icon': (
+					padding-right: calc(1.5rem * 3),
 				),
+			),
 
-				panel-body: (
-					padding: 0rem 1.5rem 1.5rem,
-				),
+			panel-body: (
+				padding: 0rem 1.5rem 1.5rem,
+			),
 
-				panel-footer: (
-					padding: 0rem 1.5rem 1.5rem,
-				),
+			panel-footer: (
+				padding: 0rem 1.5rem 1.5rem,
 			),
+		),
 
-			'.panel-sm.panel-block': (
-				collapse-icon: (
-					top: 0.9375rem,
-				),
+		'.panel-sm.panel-block': (
+			collapse-icon: (
+				top: 0.9375rem,
+			),
 
-				panel-header: (
-					font-size: 1rem,
-					padding: 0.8125rem 1rem,
+			panel-header: (
+				font-size: 1rem,
+				padding: 0.8125rem 1rem,
 
-					'&.collapse-icon': (
-						padding-right: calc(1rem * 3),
-					),
+				'&.collapse-icon': (
+					padding-right: calc(1rem * 3),
 				),
+			),
 
-				panel-body: (
-					padding: 0rem 1rem 1rem,
-				),
+			panel-body: (
+				padding: 0rem 1rem 1rem,
+			),
 
-				panel-footer: (
-					padding: 0rem 1rem 1rem,
-				),
+			panel-footer: (
+				padding: 0rem 1rem 1rem,
 			),
+		),
 
-			'.panel-sm.panel-default': (
-				collapse-icon: (
-					top: 0.375rem,
-				),
+		'.panel-sm.panel-default': (
+			collapse-icon: (
+				top: 0.375rem,
+			),
 
-				panel-header: (
-					font-size: 0.75rem,
-					line-height: 1,
-					padding-bottom: 0.34375rem,
-					padding-top: 0.34375rem,
+			panel-header: (
+				font-size: 0.75rem,
+				line-height: 1,
+				padding-bottom: 0.34375rem,
+				padding-top: 0.34375rem,
 
-					'&.collapse-icon': (
-						padding-right: 1.75rem,
-					),
+				'&.collapse-icon': (
+					padding-right: 1.75rem,
 				),
 			),
 		),
-		$panel-sizes
-	);
-}
+	),
+	$panel-sizes
+);