@clayui/css 3.161.0 → 3.163.0

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

@@ -1,1212 +1,1205 @@
-@if ($enable-atlas-custom-properties) {
-	$alert-border-radius: var(--alert-border-radius, $border-radius);
-	$alert-border-style: solid;
-	$alert-border-width: var(--alert-border-width, $border-width);
-	$alert-font-size: var(--alert-font-size, 0.875rem);
-	$alert-margin-bottom: 1rem;
-	$alert-padding-x: var(--alert-padding-x, 1rem);
-	$alert-padding-y: var(--alert-padding-y, 0.9375rem);
-
-	$alert-btn: ();
-	$alert-btn: map-deep-merge(
-		(
-			border-radius:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, border-radius),
-					$border-radius-sm
-				),
-			font-size:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, font-size),
-					$font-size-sm
-				),
-			line-height:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, line-height),
-					$line-height-sm
-				),
-			padding-bottom:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, padding-bottom),
-					0.25rem
-				),
-			padding-left:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, padding-left),
-					0.5rem
-				),
-			padding-right:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, padding-right),
-					0.5rem
-				),
-			padding-top:
-				if(
-					variable-exists(btn-sm),
-					map-get($btn-sm, padding-top),
-					0.25rem
-				),
-		),
-		$alert-btn
-	);
-
-	$alert-btn-group: ();
-	$alert-btn-group: map-deep-merge(
-		(
-			margin-bottom: -0.125rem,
-			margin-top: -0.125rem,
-		),
-		$alert-btn-group
-	);
-
-	$alert-btn-group-item: ();
-	$alert-btn-group-item: map-deep-merge(
-		(
-			margin-bottom: 0.125rem,
-			margin-top: 0.125rem,
-		),
-		$alert-btn-group-item
-	);
-
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
-
-	$alert-close-font-size: 0.875rem;
+$alert-border-radius: var(--alert-border-radius, $border-radius) !default;
+$alert-border-style: solid !default;
+$alert-border-width: var(--alert-border-width, $border-width) !default;
+$alert-font-size: var(--alert-font-size, 0.875rem) !default;
+$alert-margin-bottom: 1rem !default;
+$alert-padding-x: var(--alert-padding-x, 1rem) !default;
+$alert-padding-y: var(--alert-padding-y, 0.9375rem) !default;
+
+$alert-btn: () !default;
+$alert-btn: map-deep-merge(
+	(
+		border-radius:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, border-radius),
+				$border-radius-sm
+			),
+		font-size:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, font-size),
+				$font-size-sm
+			),
+		line-height:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, line-height),
+				$line-height-sm
+			),
+		padding-bottom:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, padding-bottom),
+				0.25rem
+			),
+		padding-left:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-left), 0.5rem),
+		padding-right:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-right), 0.5rem),
+		padding-top:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-top), 0.25rem),
+	),
+	$alert-btn
+);
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+$alert-btn-group: () !default;
+$alert-btn-group: map-deep-merge(
+	(
+		margin-bottom: -0.125rem,
+		margin-top: -0.125rem,
+	),
+	$alert-btn-group
+);
 
-	$alert-close-height: 2rem;
+$alert-btn-group-item: () !default;
+$alert-btn-group-item: map-deep-merge(
+	(
+		margin-bottom: 0.125rem,
+		margin-top: 0.125rem,
+	),
+	$alert-btn-group-item
+);
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-line-height: null;
+$alert-close-font-size: 0.875rem !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-opacity: null;
+$alert-close-height: 2rem !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-margin-left: null;
+$alert-close-line-height: null !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-padding-bottom: 0rem;
+$alert-close-opacity: null !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-padding-left: 0rem;
+$alert-close-margin-left: null !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-padding-right: 0rem;
+$alert-close-padding-bottom: 0rem !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-padding-top: 0rem;
+$alert-close-padding-left: 0rem !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-position-right: 0.5rem;
+$alert-close-padding-right: 0rem !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-position-top: 0.75rem;
+$alert-close-padding-top: 0rem !default;
 
-	// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-close-width: $alert-close-height;
+$alert-close-position-right: 0.5rem !default;
 
-	$alert-close: ();
-	$alert-close: map-deep-merge(
-		(
-			color: inherit,
-			font-size: $alert-close-font-size,
-			height: $alert-close-height,
-			line-height: $alert-close-line-height,
-			margin-left: $alert-close-margin-left,
-			opacity: $alert-close-opacity,
-			padding-bottom: $alert-close-padding-bottom,
-			padding-left: $alert-close-padding-left,
-			padding-right: $alert-close-padding-right,
-			padding-top: $alert-close-padding-top,
-			position: absolute,
-			right: $alert-close-position-right,
-			top: $alert-close-position-top,
-			width: $alert-close-width,
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-			hover: (
-				color: inherit,
-			),
-		),
-		$alert-close
-	);
+$alert-close-position-top: 0.75rem !default;
 
-	$alert-lead-font-size: var(--alert-lead-font-size, $alert-font-size);
-	$alert-lead-font-weight: var(
-		--alert-lead-font-weight,
-		$font-weight-semi-bold
-	);
-	$alert-lead-spacer-x: 0.3125rem;
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
-	$alert-title: ();
+$alert-close-width: $alert-close-height !default;
 
-	$alert-subtitle: ();
+$alert-close: () !default;
+$alert-close: map-deep-merge(
+	(
+		color: inherit,
+		font-size: $alert-close-font-size,
+		height: $alert-close-height,
+		line-height: $alert-close-line-height,
+		margin-left: $alert-close-margin-left,
+		opacity: $alert-close-opacity,
+		padding-bottom: $alert-close-padding-bottom,
+		padding-left: $alert-close-padding-left,
+		padding-right: $alert-close-padding-right,
+		padding-top: $alert-close-padding-top,
+		position: absolute,
+		right: $alert-close-position-right,
+		top: $alert-close-position-top,
+		width: $alert-close-width,
 
-	$alert: ();
-	$alert: map-deep-merge(
-		(
-			border-color: transparent,
-			border-style: $alert-border-style,
-			border-width: $alert-border-width,
-			border-radius: clay-enable-rounded($alert-border-radius),
-			display: block,
-			font-size: $alert-font-size,
-			margin-bottom: $alert-margin-bottom,
-			padding: $alert-padding-y $alert-padding-x,
-			position: relative,
-			white-space: normal,
-			word-wrap: break-word,
+		hover: (
+			color: inherit,
+		),
+	),
+	$alert-close
+);
+
+$alert-lead-font-size: var(--alert-lead-font-size, $alert-font-size) !default;
+$alert-lead-font-weight: var(
+	--alert-lead-font-weight,
+	$font-weight-semi-bold
+) !default;
+$alert-lead-spacer-x: 0.3125rem !default;
+
+$alert-title: () !default;
+
+$alert-subtitle: () !default;
+
+$alert: () !default;
+$alert: map-deep-merge(
+	(
+		border-color: transparent,
+		border-style: $alert-border-style,
+		border-width: $alert-border-width,
+		border-radius: clay-enable-rounded($alert-border-radius),
+		display: block,
+		font-size: $alert-font-size,
+		margin-bottom: $alert-margin-bottom,
+		padding: $alert-padding-y $alert-padding-x,
+		position: relative,
+		white-space: normal,
+		word-wrap: break-word,
+
+		alert-btn: $alert-btn,
+
+		btn-group: $alert-btn-group,
+
+		btn-group-item: $alert-btn-group-item,
+
+		close: $alert-close,
+
+		lead: (
+			font-size: $alert-lead-font-size,
+			font-weight: $alert-lead-font-weight,
+			margin-right: $alert-lead-spacer-x,
+		),
 
-			alert-btn: $alert-btn,
+		component-title: $alert-title,
 
-			btn-group: $alert-btn-group,
+		component-subtitle: $alert-subtitle,
+	),
+	$alert
+);
 
-			btn-group-item: $alert-btn-group-item,
+// .alert-link
 
-			close: $alert-close,
+$alert-link-decoration: null !default;
+$alert-link-font-weight: $font-weight-bold !default;
 
-			lead: (
-				font-size: $alert-lead-font-size,
-				font-weight: $alert-lead-font-weight,
-				margin-right: $alert-lead-spacer-x,
-			),
+$alert-link-hover-decoration: underline !default;
 
-			component-title: $alert-title,
+$alert-link: () !default;
+$alert-link: map-deep-merge(
+	(
+		font-weight: $alert-link-font-weight,
+		text-decoration: $alert-link-decoration,
 
-			component-subtitle: $alert-subtitle,
+		hover: (
+			text-decoration: $alert-link-hover-decoration,
 		),
-		$alert
-	);
-
-	// .alert-link
-
-	$alert-link-decoration: null;
-	$alert-link-font-weight: $font-weight-bold;
 
-	$alert-link-hover-decoration: underline;
-
-	$alert-link: ();
-	$alert-link: map-deep-merge(
-		(
-			font-weight: $alert-link-font-weight,
-			text-decoration: $alert-link-decoration,
-
-			hover: (
-				text-decoration: $alert-link-hover-decoration,
-			),
-
-			focus: (
-				text-decoration: $alert-link-hover-decoration,
-			),
+		focus: (
+			text-decoration: $alert-link-hover-decoration,
 		),
-		$alert-link
-	);
+	),
+	$alert-link
+);
 
-	// .alert-indicator
+// .alert-indicator
 
-	$alert-indicator-font-size: 1.25rem;
+$alert-indicator-font-size: 1.25rem !default;
 
-	$alert-indicator: ();
-	$alert-indicator: map-deep-merge(
-		(
-			font-size: $alert-indicator-font-size,
-			line-height: 1,
-			vertical-align: 8%,
+$alert-indicator: () !default;
+$alert-indicator: map-deep-merge(
+	(
+		font-size: $alert-indicator-font-size,
+		line-height: 1,
+		vertical-align: 8%,
 
-			lead: (
-				margin-left: $alert-lead-spacer-x,
-			),
+		lead: (
+			margin-left: $alert-lead-spacer-x,
 		),
-		$alert-indicator
-	);
+	),
+	$alert-indicator
+);
 
-	// .alert-footer
+// .alert-footer
 
-	$alert-footer: ();
-	$alert-footer: map-merge(
-		(
-			margin-top: 1.375rem,
-		),
-		$alert-footer
-	);
-
-	// Alert Dismissible
-
-	$alert-dismissible-padding-bottom: null;
-	$alert-dismissible-padding-left: null;
-	$alert-dismissible-padding-right: 2.5rem;
-	$alert-dismissible-padding-top: null;
-
-	$alert-dismissible: ();
-	$alert-dismissible: map-deep-merge(
-		(
-			padding-bottom: $alert-dismissible-padding-bottom,
-			padding-left: $alert-dismissible-padding-left,
-			padding-right: $alert-dismissible-padding-right,
-			padding-top: $alert-dismissible-padding-top,
-		),
-		$alert-dismissible
-	);
+$alert-footer: () !default;
+$alert-footer: map-merge(
+	(
+		margin-top: 1.375rem,
+	),
+	$alert-footer
+);
 
-	// Alert Fluid
+// Alert Dismissible
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+$alert-dismissible-padding-bottom: null !default;
+$alert-dismissible-padding-left: null !default;
+$alert-dismissible-padding-right: 2.5rem !default;
+$alert-dismissible-padding-top: null !default;
 
-	$alert-fluid-border-bottom-width: 1px;
+$alert-dismissible: () !default;
+$alert-dismissible: map-deep-merge(
+	(
+		padding-bottom: $alert-dismissible-padding-bottom,
+		padding-left: $alert-dismissible-padding-left,
+		padding-right: $alert-dismissible-padding-right,
+		padding-top: $alert-dismissible-padding-top,
+	),
+	$alert-dismissible
+);
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+// Alert Fluid
 
-	$alert-fluid-border-left-width: 0px;
+// @deprecated use the Sass map `$alert-fluid` instead
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+$alert-fluid-border-bottom-width: 1px !default;
 
-	$alert-fluid-border-right-width: 0px;
+// @deprecated use the Sass map `$alert-fluid` instead
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+$alert-fluid-border-left-width: 0px !default;
 
-	$alert-fluid-border-top-width: 0px;
+// @deprecated use the Sass map `$alert-fluid` instead
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+$alert-fluid-border-right-width: 0px !default;
 
-	$alert-fluid-border-width: $alert-fluid-border-top-width
-		$alert-fluid-border-right-width
-		$alert-fluid-border-bottom-width
-		$alert-fluid-border-left-width;
-	$alert-fluid-margin-bottom: 0rem;
+// @deprecated use the Sass map `$alert-fluid` instead
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+$alert-fluid-border-top-width: 0px !default;
 
-	$alert-fluid-container: ();
-	$alert-fluid-container: map-merge(
-		(
-			padding-bottom: $alert-padding-y,
-			padding-left: $alert-padding-x,
-			padding-right: $alert-padding-x,
-			padding-top: $alert-padding-y,
-		),
-		$alert-fluid-container
-	);
+// @deprecated use the Sass map `$alert-fluid` instead
 
-	// @deprecated use the Sass map `$alert-fluid` instead
+$alert-fluid-border-width: $alert-fluid-border-top-width
+	$alert-fluid-border-right-width $alert-fluid-border-bottom-width
+	$alert-fluid-border-left-width !default;
+$alert-fluid-margin-bottom: 0rem !default;
 
-	$alert-fluid-dismissible-container: ();
-	$alert-fluid-dismissible-container: map-merge(
-		(
-			padding-bottom: $alert-dismissible-padding-bottom,
-			padding-left: $alert-dismissible-padding-left,
-			padding-right:
-				calc(
-					#{$alert-dismissible-padding-right} +
-						#{$grid-gutter-width *
-						0.5}
-				),
-			padding-top: $alert-dismissible-padding-top,
-			position: relative,
-		),
-		$alert-fluid-dismissible-container
-	);
+// @deprecated use the Sass map `$alert-fluid` instead
 
-	$alert-fluid-close: ();
-	$alert-fluid-close: map-deep-merge(
-		(
-			right: calc(#{$grid-gutter-width * 0.5} + 0.25rem),
-		),
-		$alert-fluid-close
-	);
-
-	$alert-fluid: ();
-	$alert-fluid: map-deep-merge(
-		(
-			border-radius: 0px,
-			border-width: $alert-fluid-border-width,
-			margin-bottom: $alert-fluid-margin-bottom,
-			padding: 0rem,
-
-			alert-dismissible: (
-				container-fluid: $alert-fluid-dismissible-container,
-			),
+$alert-fluid-container: () !default;
+$alert-fluid-container: map-merge(
+	(
+		padding-bottom: $alert-padding-y,
+		padding-left: $alert-padding-x,
+		padding-right: $alert-padding-x,
+		padding-top: $alert-padding-y,
+	),
+	$alert-fluid-container
+);
 
-			container-fluid: $alert-fluid-container,
+// @deprecated use the Sass map `$alert-fluid` instead
 
-			close: $alert-fluid-close,
-		),
-		$alert-fluid
-	);
-
-	// .alert-notifications-absolute
-
-	$alert-notifications-absolute-bottom: null;
-	$alert-notifications-absolute-left: null;
-	$alert-notifications-absolute-right: 0.5rem;
-	$alert-notifications-absolute-top: 4.75rem;
-
-	$alert-notifications-absolute-bottom-mobile: null;
-	$alert-notifications-absolute-left-mobile: 0.5rem;
-	$alert-notifications-absolute-right-mobile: 0.5rem;
-	$alert-notifications-absolute-top-mobile: 4.25rem;
-
-	$alert-notifications-absolute: ();
-	$alert-notifications-absolute: map-deep-merge(
-		(
-			breakpoint-down: sm,
-			bottom: $alert-notifications-absolute-bottom,
-			height: 0rem,
-			left: $alert-notifications-absolute-left,
-			position: absolute,
-			right: $alert-notifications-absolute-right,
-			top: $alert-notifications-absolute-top,
-			z-index: $zindex-alert-notifications,
-
-			mobile: (
-				bottom: $alert-notifications-absolute-bottom-mobile,
-				left: $alert-notifications-absolute-left-mobile,
-				right: $alert-notifications-absolute-right-mobile,
-				top: $alert-notifications-absolute-top-mobile,
+$alert-fluid-dismissible-container: () !default;
+$alert-fluid-dismissible-container: map-merge(
+	(
+		padding-bottom: $alert-dismissible-padding-bottom,
+		padding-left: $alert-dismissible-padding-left,
+		padding-right:
+			calc(
+				#{$alert-dismissible-padding-right} + #{$grid-gutter-width * 0.5}
 			),
+		padding-top: $alert-dismissible-padding-top,
+		position: relative,
+	),
+	$alert-fluid-dismissible-container
+);
+
+$alert-fluid-close: () !default;
+$alert-fluid-close: map-deep-merge(
+	(
+		right: calc(#{$grid-gutter-width * 0.5} + 0.25rem),
+	),
+	$alert-fluid-close
+);
+
+$alert-fluid: () !default;
+$alert-fluid: map-deep-merge(
+	(
+		border-radius: 0px,
+		border-width: $alert-fluid-border-width,
+		margin-bottom: $alert-fluid-margin-bottom,
+		padding: 0rem,
+
+		alert-dismissible: (
+			container-fluid: $alert-fluid-dismissible-container,
 		),
-		$alert-notifications-absolute
-	);
-
-	// .alert-notifications-fixed
-
-	$alert-notifications-fixed-bottom: 1.25rem;
-	$alert-notifications-fixed-left: 1.25rem;
-	$alert-notifications-fixed-right: null;
-	$alert-notifications-fixed-top: null;
-
-	$alert-notifications-fixed-bottom-mobile: 1rem;
-	$alert-notifications-fixed-left-mobile: calc(#{$grid-gutter-width} * 0.5);
-	$alert-notifications-fixed-right-mobile: calc(#{$grid-gutter-width} * 0.5);
-	$alert-notifications-fixed-top-mobile: null;
-
-	$alert-notifications-fixed: ();
-	$alert-notifications-fixed: map-deep-merge(
-		(
-			breakpoint-down: sm,
-			bottom: $alert-notifications-fixed-bottom,
-			left: $alert-notifications-fixed-left,
-			position: fixed,
-			right: $alert-notifications-fixed-right,
-			top: $alert-notifications-fixed-top,
-			z-index: $zindex-alert-notifications,
-
-			mobile: (
-				bottom: $alert-notifications-fixed-bottom-mobile,
-				left: $alert-notifications-fixed-left-mobile,
-				right: $alert-notifications-fixed-right-mobile,
-				top: $alert-notifications-fixed-top-mobile,
-			),
+
+		container-fluid: $alert-fluid-container,
+
+		close: $alert-fluid-close,
+	),
+	$alert-fluid
+);
+
+// .alert-notifications-absolute
+
+$alert-notifications-absolute-bottom: null !default;
+$alert-notifications-absolute-left: null !default;
+$alert-notifications-absolute-right: 0.5rem !default;
+$alert-notifications-absolute-top: 4.75rem !default;
+
+$alert-notifications-absolute-bottom-mobile: null !default;
+$alert-notifications-absolute-left-mobile: 0.5rem !default;
+$alert-notifications-absolute-right-mobile: 0.5rem !default;
+$alert-notifications-absolute-top-mobile: 4.25rem !default;
+
+$alert-notifications-absolute: () !default;
+$alert-notifications-absolute: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		bottom: $alert-notifications-absolute-bottom,
+		height: 0rem,
+		left: $alert-notifications-absolute-left,
+		position: absolute,
+		right: $alert-notifications-absolute-right,
+		top: $alert-notifications-absolute-top,
+		z-index: $zindex-alert-notifications,
+
+		mobile: (
+			bottom: $alert-notifications-absolute-bottom-mobile,
+			left: $alert-notifications-absolute-left-mobile,
+			right: $alert-notifications-absolute-right-mobile,
+			top: $alert-notifications-absolute-top-mobile,
 		),
-		$alert-notifications-fixed
-	);
-
-	// .alert-notifications
-
-	$alert-notifications-box-shadow: null;
-	$alert-notifications-max-width: 22.5rem;
-
-	$alert-notification: ();
-	$alert-notification: map-merge(
-		(
-			box-shadow: $alert-notifications-box-shadow,
-			clear: both,
-			float: left,
-			margin-bottom: $alert-margin-bottom,
-			max-width: $alert-notifications-max-width,
+	),
+	$alert-notifications-absolute
+);
+
+// .alert-notifications-fixed
+
+$alert-notifications-fixed-bottom: 1.25rem !default;
+$alert-notifications-fixed-left: 1.25rem !default;
+$alert-notifications-fixed-right: null !default;
+$alert-notifications-fixed-top: null !default;
+
+$alert-notifications-fixed-bottom-mobile: 1rem !default;
+$alert-notifications-fixed-left-mobile: calc(
+	#{$grid-gutter-width} * 0.5
+) !default;
+$alert-notifications-fixed-right-mobile: calc(
+	#{$grid-gutter-width} * 0.5
+) !default;
+$alert-notifications-fixed-top-mobile: null !default;
+
+$alert-notifications-fixed: () !default;
+$alert-notifications-fixed: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		bottom: $alert-notifications-fixed-bottom,
+		left: $alert-notifications-fixed-left,
+		position: fixed,
+		right: $alert-notifications-fixed-right,
+		top: $alert-notifications-fixed-top,
+		z-index: $zindex-alert-notifications,
+
+		mobile: (
+			bottom: $alert-notifications-fixed-bottom-mobile,
+			left: $alert-notifications-fixed-left-mobile,
+			right: $alert-notifications-fixed-right-mobile,
+			top: $alert-notifications-fixed-top-mobile,
 		),
-		$alert-notification
-	);
-
-	$alert-notification-sm-down: ();
-	$alert-notification-sm-down: map-merge(
-		(
-			enabled: $enable-scaling-components,
-			max-width: none,
-			width: 100%,
+	),
+	$alert-notifications-fixed
+);
+
+// .alert-notifications
+
+$alert-notifications-box-shadow: null !default;
+$alert-notifications-max-width: 22.5rem !default;
+
+$alert-notification: () !default;
+$alert-notification: map-merge(
+	(
+		box-shadow: $alert-notifications-box-shadow,
+		clear: both,
+		float: left,
+		margin-bottom: $alert-margin-bottom,
+		max-width: $alert-notifications-max-width,
+	),
+	$alert-notification
+);
+
+$alert-notification-sm-down: () !default;
+$alert-notification-sm-down: map-merge(
+	(
+		enabled: $enable-scaling-components,
+		max-width: none,
+		width: 100%,
+	),
+	$alert-notification-sm-down
+);
+
+// .autofit-row.alert-autofit-row
+
+$alert-autofit-row: () !default;
+$alert-autofit-row: map-deep-merge(
+	(
+		align-items: baseline,
+		margin-left: -0.5rem,
+		margin-right: -0.5rem,
+		width: auto,
+
+		autofit-col: (
+			padding-left: 0.5rem,
+			padding-right: 0.5rem,
 		),
-		$alert-notification-sm-down
-	);
+	),
+	$alert-autofit-row
+);
 
-	// .autofit-row.alert-autofit-row
+// Alert Color Levels
 
-	$alert-autofit-row: ();
-	$alert-autofit-row: map-deep-merge(
-		(
-			align-items: baseline,
-			margin-left: -0.5rem,
-			margin-right: -0.5rem,
-			width: auto,
+// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
 
-			autofit-col: (
-				padding-left: 0.5rem,
-				padding-right: 0.5rem,
-			),
-		),
-		$alert-autofit-row
-	);
+$alert-bg-level: -10 !default;
 
-	// Alert Color Levels
+// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
 
-	// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+$alert-border-level: -9 !default;
 
-	$alert-bg-level: -10;
+// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
 
-	// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+$alert-color-level: 6 !default;
 
-	$alert-border-level: -9;
+// Alert Feedback
 
-	// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+$alert-feedback-close: () !default;
+$alert-feedback-close: map-deep-merge(
+	(
+		font-size: inherit,
+		height: 1rem,
+		position: relative,
+		right: auto,
+		top: 0.125em,
+		width: 1rem,
+	),
+	$alert-feedback-close
+);
 
-	$alert-color-level: 6;
+$alert-feedback: () !default;
+$alert-feedback: map-deep-merge(
+	(
+		background-color: transparent,
+		border-width: 0rem,
+		margin-bottom: 0.25rem,
+		padding: 0rem,
 
-	// Alert Feedback
+		close: (),
+	),
+	$alert-feedback
+);
 
-	$alert-feedback-close: ();
-	$alert-feedback-close: map-deep-merge(
-		(
-			font-size: inherit,
-			height: 1rem,
-			position: relative,
-			right: auto,
-			top: 0.125em,
-			width: 1rem,
-		),
-		$alert-feedback-close
-	);
-
-	$alert-feedback: ();
-	$alert-feedback: map-deep-merge(
-		(
-			background-color: transparent,
-			border-width: 0rem,
-			margin-bottom: 0.25rem,
-			padding: 0rem,
-
-			close: (),
-		),
-		$alert-feedback
-	);
+// .alert-inline.alert
 
-	// .alert-inline.alert
+$alert-inline: () !default;
+$alert-inline: map-deep-merge(
+	(
+		display: inline-block,
+		max-width: 100%,
+		width: auto,
 
-	$alert-inline: ();
-	$alert-inline: map-deep-merge(
-		(
-			display: inline-block,
-			max-width: 100%,
-			width: auto,
+		alert-dismissible: (
+			padding-right: 3.5rem,
+		),
+
+		alert-dismissible-alert-fluid: (
+			padding-right: 0rem,
 
-			alert-dismissible: (
+			container-fluid: (
 				padding-right: 3.5rem,
 			),
+		),
 
-			alert-dismissible-alert-fluid: (
-				padding-right: 0rem,
+		alert-autofit-row: (
+			align-items: center,
+			margin-bottom: calc(#{$alert-padding-y} * -1 - 1px),
+			margin-top: calc(#{$alert-padding-y} * -1 - 1px),
+			padding-bottom: 0.5625rem,
+			padding-top: 0.5625rem,
+			min-height: 3.5rem,
 
-				container-fluid: (
-					padding-right: 3.5rem,
-				),
+			btn-group: (
+				margin-right: 2rem,
 			),
+		),
 
-			alert-autofit-row: (
-				align-items: center,
-				margin-bottom: calc(#{$alert-padding-y} * -1 - 1px),
-				margin-top: calc(#{$alert-padding-y} * -1 - 1px),
-				padding-bottom: 0.5625rem,
-				padding-top: 0.5625rem,
-				min-height: 3.5rem,
+		close: (
+			margin-top: -1rem,
+			top: 50%,
+		),
+	),
+	$alert-inline
+);
+
+// .alert-autofit-stacked.alert
+
+$alert-autofit-stacked: () !default;
+$alert-autofit-stacked: map-deep-merge(
+	(
+		alert-autofit-row: (
+			align-items: flex-start,
+			flex-direction: column,
+			margin-bottom: 0rem,
+			margin-top: 0rem,
+			min-height: 0rem,
+			padding-bottom: 0rem,
+			padding-top: 0rem,
 
-				btn-group: (
-					margin-right: 2rem,
-				),
+			autofit-col: (
+				width: 100%,
 			),
 
-			close: (
-				margin-top: -1rem,
-				top: 50%,
+			btn-group: (
+				margin-right: 0rem,
+				margin-top: 0.875rem,
 			),
 		),
-		$alert-inline
-	);
-
-	// .alert-autofit-stacked.alert
-
-	$alert-autofit-stacked: ();
-	$alert-autofit-stacked: map-deep-merge(
-		(
-			alert-autofit-row: (
-				align-items: flex-start,
-				flex-direction: column,
-				margin-bottom: 0rem,
-				margin-top: 0rem,
-				min-height: 0rem,
-				padding-bottom: 0rem,
-				padding-top: 0rem,
-
-				autofit-col: (
-					width: 100%,
-				),
 
-				btn-group: (
-					margin-right: 0rem,
-					margin-top: 0.875rem,
-				),
+		close: (
+			margin-top: 0rem,
+			top: map-get($alert-close, top),
+		),
+	),
+	$alert-autofit-stacked
+);
+
+// .alert-autofit-stacked-sm-down.alert
+
+$alert-autofit-stacked-sm-down: () !default;
+$alert-autofit-stacked-sm-down: map-deep-merge(
+	$alert-autofit-stacked,
+	$alert-autofit-stacked-sm-down
+);
+
+// .alert-autofit-stacked-xs-down.alert
+
+$alert-autofit-stacked-xs-down: () !default;
+$alert-autofit-stacked-xs-down: map-deep-merge(
+	$alert-autofit-stacked,
+	$alert-autofit-stacked-xs-down
+);
+
+// .alert-indicator-start.alert
+
+$alert-indicator-start: () !default;
+$alert-indicator-start: map-deep-merge(
+	(
+		padding-left:
+			calc(
+				#{$alert-indicator-font-size} + #{$alert-padding-x} + #{map-deep-get(
+						$alert-autofit-row,
+						autofit-col,
+						padding-left
+					)}
 			),
+		alert-fluid: (
+			padding-left: 0rem,
 
-			close: (
-				margin-top: 0rem,
-				top: map-get($alert-close, top),
+			container-fluid: (
+				padding-left:
+					calc(
+						#{$alert-indicator-font-size} + #{$alert-padding-x} + #{map-deep-get(
+								$alert-autofit-row,
+								autofit-col,
+								padding-left
+							)}
+					),
 			),
 		),
-		$alert-autofit-stacked
-	);
-
-	// .alert-autofit-stacked-sm-down.alert
-
-	$alert-autofit-stacked-sm-down: ();
-	$alert-autofit-stacked-sm-down: map-deep-merge(
-		$alert-autofit-stacked,
-		$alert-autofit-stacked-sm-down
-	);
-
-	// .alert-autofit-stacked-xs-down.alert
-
-	$alert-autofit-stacked-xs-down: ();
-	$alert-autofit-stacked-xs-down: map-deep-merge(
-		$alert-autofit-stacked,
-		$alert-autofit-stacked-xs-down
-	);
 
-	// .alert-indicator-start.alert
-
-	$alert-indicator-start: ();
-	$alert-indicator-start: map-deep-merge(
-		(
+		alert-feedback: (
 			padding-left:
 				calc(
-					#{$alert-indicator-font-size} +
-						#{$alert-padding-x} +
-						#{map-deep-get(
+					#{$alert-indicator-font-size} + #{map-deep-get(
 							$alert-autofit-row,
 							autofit-col,
 							padding-left
 						)}
 				),
-			alert-fluid: (
-				padding-left: 0rem,
-
-				container-fluid: (
-					padding-left:
-						calc(
-							#{$alert-indicator-font-size} +
-								#{$alert-padding-x} +
-								#{map-deep-get(
-									$alert-autofit-row,
-									autofit-col,
-									padding-left
-								)}
-						),
+		),
+
+		alert-indicator: (
+			line-height: 1,
+			margin-left:
+				calc(
+					-1em - #{map-deep-get(
+							$alert-autofit-row,
+							autofit-col,
+							padding-left
+						)}
 				),
+			margin-top: 4px,
+			position: absolute,
+
+			lead: (
+				margin-left: 0rem,
 			),
+		),
 
-			alert-feedback: (
-				padding-left:
-					calc(
-						#{$alert-indicator-font-size} +
-							#{map-deep-get(
-								$alert-autofit-row,
-								autofit-col,
-								padding-left
-							)}
-					),
+		alert-autofit-row: (
+			alert-indicator-only-child: (
+				margin-right: 0rem,
 			),
+		),
+	),
+	$alert-indicator-start
+);
 
-			alert-indicator: (
-				line-height: 1,
-				margin-left:
-					calc(
-						-1em -
-							#{map-deep-get(
-								$alert-autofit-row,
-								autofit-col,
-								padding-left
-							)}
-					),
-				margin-top: 4px,
-				position: absolute,
+// .alert-primary
 
-				lead: (
-					margin-left: 0rem,
-				),
-			),
+$alert-primary-bg: var(--alert-primary-background-color, $primary-l3) !default;
+$alert-primary-border-color: var(
+	--alert-primary-border-color,
+	$primary-l1
+) !default;
+$alert-primary-color: var(--alert-primary-color, $primary) !default;
 
-			alert-autofit-row: (
-				alert-indicator-only-child: (
-					margin-right: 0rem,
-				),
-			),
-		),
-		$alert-indicator-start
-	);
+$alert-primary-close-color: null !default;
+$alert-primary-close-hover-color: null !default;
 
-	// .alert-primary
+$alert-primary-lead-color: null !default;
 
-	$alert-primary-bg: var(--alert-primary-background-color, $primary-l3);
-	$alert-primary-border-color: var(--alert-primary-border-color, $primary-l1);
-	$alert-primary-color: var(--alert-primary-color, $primary);
+$alert-primary-link-color: null !default;
 
-	$alert-primary-close-color: null;
-	$alert-primary-close-hover-color: null;
+$alert-primary-link-hover-color: null !default;
 
-	$alert-primary-lead-color: null;
+$alert-primary-btn: () !default;
+$alert-primary-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $primary-l1,
+		color: $primary,
 
-	$alert-primary-link-color: null;
+		hover: (
+			background-color: $primary,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-primary-btn
+);
+
+$alert-primary: () !default;
+$alert-primary: map-deep-merge(
+	(
+		background-color: $alert-primary-bg,
+		border-color: $alert-primary-border-color,
+		color: $alert-primary-color,
+
+		hr: (
+			border-top-color: $primary,
+		),
 
-	$alert-primary-link-hover-color: null;
+		alert-btn: $alert-primary-btn,
 
-	$alert-primary-btn: ();
-	$alert-primary-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $primary-l1,
-			color: $primary,
+		close: (
+			color: $alert-primary-close-color,
 
 			hover: (
-				background-color: $primary,
-				border-color: transparent,
-				color: $white,
+				color: $alert-primary-close-hover-color,
 			),
 		),
-		$alert-primary-btn
-	);
-
-	$alert-primary: ();
-	$alert-primary: map-deep-merge(
-		(
-			background-color: $alert-primary-bg,
-			border-color: $alert-primary-border-color,
-			color: $alert-primary-color,
-
-			hr: (
-				border-top-color: $primary,
-			),
 
-			alert-btn: $alert-primary-btn,
+		lead: (
+			color: $alert-primary-lead-color,
+		),
 
-			close: (
-				color: $alert-primary-close-color,
+		alert-link: (
+			color: $alert-primary-link-color,
 
-				hover: (
-					color: $alert-primary-close-hover-color,
-				),
+			hover: (
+				color: $alert-primary-link-hover-color,
 			),
+		),
+	),
+	$alert-primary
+);
 
-			lead: (
-				color: $alert-primary-lead-color,
-			),
+// .alert-secondary
 
-			alert-link: (
-				color: $alert-primary-link-color,
+$alert-secondary-bg: var(
+	--alert-secondary-background-color,
+	$light-l1
+) !default;
+$alert-secondary-border-color: var(
+	--alert-secondary-border-color,
+	$light-d2
+) !default;
+$alert-secondary-color: var(--alert-secondary-color, $secondary) !default;
 
-				hover: (
-					color: $alert-primary-link-hover-color,
-				),
-			),
-		),
-		$alert-primary
-	);
+$alert-secondary-close-color: null !default;
 
-	// .alert-secondary
+$alert-secondary-close-hover-color: null !default;
 
-	$alert-secondary-bg: var(--alert-secondary-background-color, $light-l1);
-	$alert-secondary-border-color: var(
-		--alert-secondary-border-color,
-		$light-d2
-	);
-	$alert-secondary-color: var(--alert-secondary-color, $secondary);
+$alert-secondary-lead-color: null !default;
 
-	$alert-secondary-close-color: null;
+$alert-secondary-link-color: null !default;
 
-	$alert-secondary-close-hover-color: null;
+$alert-secondary-link-hover-color: null !default;
 
-	$alert-secondary-lead-color: null;
+$alert-secondary-btn: () !default;
+$alert-secondary-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $secondary-l1,
+		color: $secondary,
 
-	$alert-secondary-link-color: null;
+		hover: (
+			background-color: $secondary,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-secondary-btn
+);
 
-	$alert-secondary-link-hover-color: null;
+$alert-secondary: () !default;
+$alert-secondary: map-deep-merge(
+	(
+		background-color: $alert-secondary-bg,
+		border-color: $alert-secondary-border-color,
+		color: $alert-secondary-color,
 
-	$alert-secondary-btn: ();
-	$alert-secondary-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $secondary-l1,
-			color: $secondary,
+		close: (
+			color: $alert-secondary-close-color,
 
 			hover: (
-				background-color: $secondary,
-				border-color: transparent,
-				color: $white,
+				color: $alert-secondary-close-hover-color,
 			),
 		),
-		$alert-secondary-btn
-	);
 
-	$alert-secondary: ();
-	$alert-secondary: map-deep-merge(
-		(
-			background-color: $alert-secondary-bg,
-			border-color: $alert-secondary-border-color,
-			color: $alert-secondary-color,
+		lead: (
+			color: $alert-secondary-lead-color,
+		),
 
-			close: (
-				color: $alert-secondary-close-color,
+		alert-link: (
+			color: $alert-secondary-link-color,
 
-				hover: (
-					color: $alert-secondary-close-hover-color,
-				),
+			hover: (
+				color: $alert-secondary-link-hover-color,
 			),
+		),
 
-			lead: (
-				color: $alert-secondary-lead-color,
-			),
+		alert-btn: $alert-secondary-btn,
+	),
+	$alert-secondary
+);
 
-			alert-link: (
-				color: $alert-secondary-link-color,
+// .alert-success
 
-				hover: (
-					color: $alert-secondary-link-hover-color,
-				),
-			),
+$alert-success-bg: var(--alert-success-background-color, $success-l2) !default;
+$alert-success-border-color: var(
+	--alert-success-border-color,
+	$success-l1
+) !default;
+$alert-success-color: var(--alert-success-color, $success) !default;
 
-			alert-btn: $alert-secondary-btn,
-		),
-		$alert-secondary
-	);
+$alert-success-close-color: null !default;
 
-	// .alert-success
+$alert-success-close-hover-color: null !default;
 
-	$alert-success-bg: var(--alert-success-background-color, $success-l2);
-	$alert-success-border-color: var(--alert-success-border-color, $success-l1);
-	$alert-success-color: var(--alert-success-color, $success);
+$alert-success-lead-color: null !default;
 
-	$alert-success-close-color: null;
+$alert-success-link-color: null !default;
 
-	$alert-success-close-hover-color: null;
+$alert-success-link-hover-color: null !default;
 
-	$alert-success-lead-color: null;
+$alert-success-btn: () !default;
+$alert-success-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $success-l1,
+		color: $success,
 
-	$alert-success-link-color: null;
+		hover: (
+			background-color: $success,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-success-btn
+);
 
-	$alert-success-link-hover-color: null;
+$alert-success: () !default;
+$alert-success: map-deep-merge(
+	(
+		background-color: $alert-success-bg,
+		border-color: $alert-success-border-color,
+		color: $alert-success-color,
 
-	$alert-success-btn: ();
-	$alert-success-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $success-l1,
-			color: $success,
+		close: (
+			color: $alert-success-close-color,
 
 			hover: (
-				background-color: $success,
-				border-color: transparent,
-				color: $white,
+				color: $alert-success-close-hover-color,
 			),
 		),
-		$alert-success-btn
-	);
 
-	$alert-success: ();
-	$alert-success: map-deep-merge(
-		(
-			background-color: $alert-success-bg,
-			border-color: $alert-success-border-color,
-			color: $alert-success-color,
+		lead: (
+			color: $alert-success-lead-color,
+		),
 
-			close: (
-				color: $alert-success-close-color,
+		alert-link: (
+			color: $alert-success-link-color,
 
-				hover: (
-					color: $alert-success-close-hover-color,
-				),
+			hover: (
+				color: $alert-success-link-hover-color,
 			),
+		),
 
-			lead: (
-				color: $alert-success-lead-color,
-			),
+		alert-btn: $alert-success-btn,
+	),
+	$alert-success
+);
 
-			alert-link: (
-				color: $alert-success-link-color,
+// .alert-info
 
-				hover: (
-					color: $alert-success-link-hover-color,
-				),
-			),
+$alert-info-bg: var(--alert-info-background-color, $info-l2) !default;
+$alert-info-border-color: var(--alert-info-border-color, $info-l1) !default;
+$alert-info-color: var(--alert-info-color, $info) !default;
 
-			alert-btn: $alert-success-btn,
-		),
-		$alert-success
-	);
+$alert-info-close-color: null !default;
 
-	// .alert-info
+$alert-info-close-hover-color: null !default;
 
-	$alert-info-bg: var(--alert-info-background-color, $info-l2);
-	$alert-info-border-color: var(--alert-info-border-color, $info-l1);
-	$alert-info-color: var(--alert-info-color, $info);
+$alert-info-lead-color: null !default;
 
-	$alert-info-close-color: null;
+$alert-info-link-color: null !default;
 
-	$alert-info-close-hover-color: null;
+$alert-info-link-hover-color: null !default;
 
-	$alert-info-lead-color: null;
+$alert-info-btn: () !default;
+$alert-info-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $info-l1,
+		color: $info,
 
-	$alert-info-link-color: null;
+		hover: (
+			background-color: $info,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-info-btn
+);
 
-	$alert-info-link-hover-color: null;
+$alert-info: () !default;
+$alert-info: map-deep-merge(
+	(
+		background-color: $alert-info-bg,
+		border-color: $alert-info-border-color,
+		color: $alert-info-color,
 
-	$alert-info-btn: ();
-	$alert-info-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $info-l1,
-			color: $info,
+		close: (
+			color: $alert-info-close-color,
 
 			hover: (
-				background-color: $info,
-				border-color: transparent,
-				color: $white,
+				color: $alert-info-close-hover-color,
 			),
 		),
-		$alert-info-btn
-	);
 
-	$alert-info: ();
-	$alert-info: map-deep-merge(
-		(
-			background-color: $alert-info-bg,
-			border-color: $alert-info-border-color,
-			color: $alert-info-color,
+		lead: (
+			color: $alert-info-lead-color,
+		),
 
-			close: (
-				color: $alert-info-close-color,
+		link: (
+			color: $alert-info-link-color,
 
-				hover: (
-					color: $alert-info-close-hover-color,
-				),
+			hover: (
+				color: $alert-info-link-hover-color,
 			),
+		),
 
-			lead: (
-				color: $alert-info-lead-color,
-			),
+		alert-btn: $alert-info-btn,
+	),
+	$alert-info
+);
 
-			link: (
-				color: $alert-info-link-color,
+// .alert-warning
 
-				hover: (
-					color: $alert-info-link-hover-color,
-				),
-			),
+$alert-warning-bg: var(--alert-warning-background-color, $warning-l2) !default;
+$alert-warning-border-color: var(
+	--alert-warning-border-color,
+	$warning-l1
+) !default;
+$alert-warning-color: var(--alert-warning-color, $warning) !default;
 
-			alert-btn: $alert-info-btn,
-		),
-		$alert-info
-	);
+$alert-warning-close-color: null !default;
 
-	// .alert-warning
+$alert-warning-close-hover-color: null !default;
 
-	$alert-warning-bg: var(--alert-warning-background-color, $warning-l2);
-	$alert-warning-border-color: var(--alert-warning-border-color, $warning-l1);
-	$alert-warning-color: var(--alert-warning-color, $warning);
+$alert-warning-lead-color: null !default;
 
-	$alert-warning-close-color: null;
+$alert-warning-link-color: null !default;
 
-	$alert-warning-close-hover-color: null;
+$alert-warning-link-hover-color: null !default;
 
-	$alert-warning-lead-color: null;
+$alert-warning-btn: () !default;
+$alert-warning-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $warning-l1,
+		color: $warning,
 
-	$alert-warning-link-color: null;
+		hover: (
+			background-color: $warning,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-warning-btn
+);
 
-	$alert-warning-link-hover-color: null;
+$alert-warning: () !default;
+$alert-warning: map-deep-merge(
+	(
+		background-color: $alert-warning-bg,
+		border-color: $alert-warning-border-color,
+		color: $alert-warning-color,
 
-	$alert-warning-btn: ();
-	$alert-warning-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $warning-l1,
-			color: $warning,
+		close: (
+			color: $alert-warning-close-color,
 
 			hover: (
-				background-color: $warning,
-				border-color: transparent,
-				color: $white,
+				color: $alert-warning-close-hover-color,
 			),
 		),
-		$alert-warning-btn
-	);
 
-	$alert-warning: ();
-	$alert-warning: map-deep-merge(
-		(
-			background-color: $alert-warning-bg,
-			border-color: $alert-warning-border-color,
-			color: $alert-warning-color,
+		lead: (
+			color: $alert-warning-lead-color,
+		),
 
-			close: (
-				color: $alert-warning-close-color,
+		link: (
+			color: $alert-warning-link-color,
 
-				hover: (
-					color: $alert-warning-close-hover-color,
-				),
+			hover: (
+				color: $alert-warning-link-hover-color,
 			),
+		),
 
-			lead: (
-				color: $alert-warning-lead-color,
-			),
+		alert-btn: $alert-warning-btn,
+	),
+	$alert-warning
+);
 
-			link: (
-				color: $alert-warning-link-color,
+// .alert-danger
 
-				hover: (
-					color: $alert-warning-link-hover-color,
-				),
-			),
+$alert-danger-bg: var(--alert-danger-background-color, $danger-l2) !default;
+$alert-danger-border-color: var(--alert-danger-border-color, $danger) !default;
+$alert-danger-color: var(--alert-danger-color, $danger) !default;
 
-			alert-btn: $alert-warning-btn,
-		),
-		$alert-warning
-	);
+$alert-danger-close-color: null !default;
 
-	// .alert-danger
+$alert-danger-close-hover-color: null !default;
 
-	$alert-danger-bg: var(--alert-danger-background-color, $danger-l2);
-	$alert-danger-border-color: var(--alert-danger-border-color, $danger);
-	$alert-danger-color: var(--alert-danger-color, $danger);
+$alert-danger-lead-color: null !default;
 
-	$alert-danger-close-color: null;
+$alert-danger-link-color: null !default;
 
-	$alert-danger-close-hover-color: null;
+$alert-danger-link-hover-color: null !default;
 
-	$alert-danger-lead-color: null;
+$alert-danger-btn: () !default;
+$alert-danger-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $danger-l1,
+		color: $danger,
 
-	$alert-danger-link-color: null;
+		hover: (
+			background-color: $danger,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-danger-btn
+);
 
-	$alert-danger-link-hover-color: null;
+$alert-danger: () !default;
+$alert-danger: map-deep-merge(
+	(
+		background-color: $alert-danger-bg,
+		border-color: $alert-danger-border-color,
+		color: $alert-danger-color,
 
-	$alert-danger-btn: ();
-	$alert-danger-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $danger-l1,
-			color: $danger,
+		close: (
+			color: $alert-danger-close-color,
 
 			hover: (
-				background-color: $danger,
-				border-color: transparent,
-				color: $white,
+				color: $alert-danger-close-hover-color,
 			),
 		),
-		$alert-danger-btn
-	);
 
-	$alert-danger: ();
-	$alert-danger: map-deep-merge(
-		(
-			background-color: $alert-danger-bg,
-			border-color: $alert-danger-border-color,
-			color: $alert-danger-color,
+		lead: (
+			color: $alert-danger-lead-color,
+		),
 
-			close: (
-				color: $alert-danger-close-color,
+		link: (
+			color: $alert-danger-link-color,
 
-				hover: (
-					color: $alert-danger-close-hover-color,
-				),
+			hover: (
+				color: $alert-danger-link-hover-color,
 			),
+		),
 
-			lead: (
-				color: $alert-danger-lead-color,
-			),
+		alert-btn: $alert-danger-btn,
+	),
+	$alert-danger
+);
 
-			link: (
-				color: $alert-danger-link-color,
+// .alert-light
 
-				hover: (
-					color: $alert-danger-link-hover-color,
-				),
-			),
+$alert-light-bg: var(--alert-light-background-color, $light-l2) !default;
+$alert-light-border-color: var(--alert-light-border-color, $light-l1) !default;
+$alert-light-color: var(--alert-light-color, $dark) !default;
 
-			alert-btn: $alert-danger-btn,
-		),
-		$alert-danger
-	);
+$alert-light-close-color: null !default;
 
-	// .alert-light
+$alert-light-close-hover-color: null !default;
 
-	$alert-light-bg: var(--alert-light-background-color, $light-l2);
-	$alert-light-border-color: var(--alert-light-border-color, $light-l1);
-	$alert-light-color: var(--alert-light-color, $dark);
+$alert-light-lead-color: null !default;
 
-	$alert-light-close-color: null;
+$alert-light-link-color: null !default;
 
-	$alert-light-close-hover-color: null;
+$alert-light-link-hover-color: null !default;
 
-	$alert-light-lead-color: null;
+$alert-light-btn: () !default;
+$alert-light-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $dark-l1,
+		color: $dark,
 
-	$alert-light-link-color: null;
+		hover: (
+			background-color: $dark,
+			border-color: transparent,
+			color: $white,
+		),
+	),
+	$alert-light-btn
+);
 
-	$alert-light-link-hover-color: null;
+$alert-light: () !default;
+$alert-light: map-deep-merge(
+	(
+		background-color: $alert-light-bg,
+		border-color: $alert-light-border-color,
+		color: $alert-light-color,
 
-	$alert-light-btn: ();
-	$alert-light-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $dark-l1,
-			color: $dark,
+		close: (
+			color: $alert-light-close-color,
 
 			hover: (
-				background-color: $dark,
-				border-color: transparent,
-				color: $white,
+				color: $alert-light-close-hover-color,
 			),
 		),
-		$alert-light-btn
-	);
-
-	$alert-light: ();
-	$alert-light: map-deep-merge(
-		(
-			background-color: $alert-light-bg,
-			border-color: $alert-light-border-color,
-			color: $alert-light-color,
-
-			close: (
-				color: $alert-light-close-color,
 
-				hover: (
-					color: $alert-light-close-hover-color,
-				),
-			),
-
-			lead: (
-				color: $alert-light-lead-color,
-			),
+		lead: (
+			color: $alert-light-lead-color,
+		),
 
-			link: (
-				color: $alert-light-link-color,
+		link: (
+			color: $alert-light-link-color,
 
-				hover: (
-					color: $alert-light-link-hover-color,
-				),
+			hover: (
+				color: $alert-light-link-hover-color,
 			),
-
-			alert-btn: $alert-light-btn,
 		),
-		$alert-light
-	);
 
-	// .alert-dark
+		alert-btn: $alert-light-btn,
+	),
+	$alert-light
+);
 
-	$alert-dark-bg: var(--alert-dark-background-color, $dark-l2);
-	$alert-dark-border-color: var(--alert-dark-border-color, $dark-l1);
-	$alert-dark-color: var(--alert-dark-color, $light);
+// .alert-dark
 
-	$alert-dark-close-color: null;
+$alert-dark-bg: var(--alert-dark-background-color, $dark-l2) !default;
+$alert-dark-border-color: var(--alert-dark-border-color, $dark-l1) !default;
+$alert-dark-color: var(--alert-dark-color, $light) !default;
 
-	$alert-dark-close-hover-color: null;
+$alert-dark-close-color: null !default;
 
-	$alert-dark-lead-color: null;
+$alert-dark-close-hover-color: null !default;
 
-	$alert-dark-link-color: null;
+$alert-dark-lead-color: null !default;
 
-	$alert-dark-link-hover-color: null;
+$alert-dark-link-color: null !default;
 
-	$alert-dark-btn: ();
-	$alert-dark-btn: map-deep-merge(
-		(
-			background-color: $white,
-			border-color: $dark-l1,
-			color: $dark,
+$alert-dark-link-hover-color: null !default;
 
-			hover: (
-				background-color: $dark,
-				border-color: transparent,
-				color: $white,
-			),
+$alert-dark-btn: () !default;
+$alert-dark-btn: map-deep-merge(
+	(
+		background-color: $white,
+		border-color: $dark-l1,
+		color: $dark,
 
-			active: (
-				background-color: unquote('hsl(from #{$dark} h s calc(l - 5))'),
-				border-color: unquote('hsl(from #{$dark} h s calc(l - 5))'),
-			),
+		hover: (
+			background-color: $dark,
+			border-color: transparent,
+			color: $white,
 		),
-		$alert-dark-btn
-	);
 
-	$alert-dark: ();
-	$alert-dark: map-deep-merge(
-		(
-			background-color: $alert-dark-bg,
-			border-color: $alert-dark-border-color,
-			color: $alert-dark-color,
+		active: (
+			background-color: unquote('hsl(from #{$dark} h s calc(l - 5))'),
+			border-color: unquote('hsl(from #{$dark} h s calc(l - 5))'),
+		),
+	),
+	$alert-dark-btn
+);
 
-			close: (
-				color: $alert-dark-close-color,
+$alert-dark: () !default;
+$alert-dark: map-deep-merge(
+	(
+		background-color: $alert-dark-bg,
+		border-color: $alert-dark-border-color,
+		color: $alert-dark-color,
 
-				hover: (
-					color: $alert-dark-close-hover-color,
-				),
-			),
+		close: (
+			color: $alert-dark-close-color,
 
-			lead: (
-				color: $alert-dark-lead-color,
+			hover: (
+				color: $alert-dark-close-hover-color,
 			),
+		),
 
-			link: (
-				color: $alert-dark-link-color,
+		lead: (
+			color: $alert-dark-lead-color,
+		),
 
-				hover: (
-					color: $alert-dark-link-hover-color,
-				),
-			),
+		link: (
+			color: $alert-dark-link-color,
 
-			alert-btn: $alert-dark-btn,
+			hover: (
+				color: $alert-dark-link-hover-color,
+			),
 		),
-		$alert-dark
-	);
 
-	$alert-palette: ();
-	$alert-palette: map-deep-merge(
-		(
-			primary: $alert-primary,
+		alert-btn: $alert-dark-btn,
+	),
+	$alert-dark
+);
 
-			secondary: $alert-secondary,
+$alert-palette: () !default;
+$alert-palette: map-deep-merge(
+	(
+		primary: $alert-primary,
 
-			success: $alert-success,
+		secondary: $alert-secondary,
 
-			info: $alert-info,
+		success: $alert-success,
 
-			warning: $alert-warning,
+		info: $alert-info,
 
-			danger: $alert-danger,
+		warning: $alert-warning,
 
-			light: $alert-light,
+		danger: $alert-danger,
 
-			dark: $alert-dark,
-		),
-		$alert-palette
-	);
-}
+		light: $alert-light,
+
+		dark: $alert-dark,
+	),
+	$alert-palette
+);