@clayui/css 3.161.0 → 3.163.0

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

@@ -1,836 +1,778 @@
-@if ($enable-atlas-custom-properties) {
-	$menubar-primary: ();
-	$menubar-primary: map-deep-merge(
-		(
-			nav-item: (
-				position: relative,
-			),
+$menubar-primary: () !default;
+$menubar-primary: map-deep-merge(
+	(
+		nav-item: (
+			position: relative,
+		),
 
-			nav-link: (
-				border-radius: var(--menubar-primary-nav-link-border-radius, 0),
-				color: var(--menubar-primary-nav-link-color, $gray-900),
-				line-height: var(--menubar-primary-nav-link-line-height, 24px),
-				overflow: var(--menubar-primary-nav-link-overflow, visible),
-				padding: var(--menubar-primary-nav-link-padding, 10px 16px),
+		nav-link: (
+			border-radius: var(--menubar-primary-nav-link-border-radius, 0),
+			color: var(--menubar-primary-nav-link-color, $gray-900),
+			line-height: var(--menubar-primary-nav-link-line-height, 24px),
+			overflow: var(--menubar-primary-nav-link-overflow, visible),
+			padding: var(--menubar-primary-nav-link-padding, 10px 16px),
+			transition:
+				var(
+					--menubar-primary-nav-link-transition,
+					#{color 0.15s ease-in-out,
+					background-color 0.15s ease-in-out,
+					border-color 0.15s ease-in-out,
+					box-shadow 0.15s ease-in-out}
+				),
+			before: (
+				bottom: var(--menubar-primary-nav-link-highlight-bottom, 0),
+				content: var(--menubar-primary-nav-link-highlight-content, ''),
+				display:
+					var(--menubar-primary-nav-link-highlight-display, block),
+				left: var(--menubar-primary-nav-link-highlight-left, 0),
+				position:
+					var(--menubar-primary-nav-link-highlight-position, absolute),
+				right: var(--menubar-primary-nav-link-highlight-right, auto),
+				top: var(--menubar-primary-nav-link-highlight-top, 0),
 				transition:
 					var(
-						--menubar-primary-nav-link-transition,
-						#{color 0.15s ease-in-out,
-						background-color 0.15s ease-in-out,
-						border-color 0.15s ease-in-out,
-						box-shadow 0.15s ease-in-out}
+						--menubar-primary-nav-link-highlight-transition,
+						$transition-base
 					),
+			),
+
+			hover: (
+				background-color:
+					var(
+						--menubar-primary-nav-link-hover-background-color,
+						$primary-l3
+					),
+				color: var(--menubar-primary-nav-link-hover-color, $gray-900),
+				letter-spacing:
+					var(--menubar-primary-nav-link-hover-letter-spacing, 0),
 				before: (
-					bottom: var(--menubar-primary-nav-link-highlight-bottom, 0),
-					content:
-						var(--menubar-primary-nav-link-highlight-content, ''),
-					display:
+					background-color:
 						var(
-							--menubar-primary-nav-link-highlight-display,
-							block
+							--menubar-primary-nav-link-hover-highlight-background-color,
+							$secondary-l0
 						),
-					left: var(--menubar-primary-nav-link-highlight-left, 0),
-					position:
+					height:
 						var(
-							--menubar-primary-nav-link-highlight-position,
-							absolute
+							--menubar-primary-nav-link-hover-highlight-height,
+							auto
 						),
-					right:
-						var(--menubar-primary-nav-link-highlight-right, auto),
-					top: var(--menubar-primary-nav-link-highlight-top, 0),
-					transition:
+					width:
 						var(
-							--menubar-primary-nav-link-highlight-transition,
-							$transition-base
+							--menubar-primary-nav-link-hover-highlight-width,
+							0.125rem
 						),
 				),
+			),
 
-				hover: (
-					background-color:
-						var(
-							--menubar-primary-nav-link-hover-background-color,
-							$primary-l3
-						),
-					color:
-						var(--menubar-primary-nav-link-hover-color, $gray-900),
-					letter-spacing:
-						var(--menubar-primary-nav-link-hover-letter-spacing, 0),
-					before: (
-						background-color:
-							var(
-								--menubar-primary-nav-link-hover-highlight-background-color,
-								$secondary-l0
-							),
-						height:
-							var(
-								--menubar-primary-nav-link-hover-highlight-height,
-								auto
-							),
-						width:
-							var(
-								--menubar-primary-nav-link-hover-highlight-width,
-								0.125rem
-							),
+			focus: (
+				background-color:
+					var(
+						--menubar-primary-nav-link-focus-background-color,
+						transparent
 					),
-				),
+				box-shadow: none,
+				color: var(--menubar-primary-nav-link-focus-color, $gray-900),
+				outline: 0,
 
-				focus: (
-					background-color:
+				after: (
+					bottom: 0,
+					box-shadow:
 						var(
-							--menubar-primary-nav-link-focus-background-color,
-							transparent
+							--menubar-primary-nav-link-focus-box-shadow,
+							$component-focus-inset-box-shadow
 						),
-					box-shadow: none,
-					color:
-						var(--menubar-primary-nav-link-focus-color, $gray-900),
-					outline: 0,
-
-					after: (
-						bottom: 0,
-						box-shadow:
-							var(
-								--menubar-primary-nav-link-focus-box-shadow,
-								$component-focus-inset-box-shadow
-							),
-						content: '',
-						display: block,
-						left: 0,
-						pointer-events: none,
-						position: absolute,
-						right: 0,
-						top: 0,
-					),
+					content: '',
+					display: block,
+					left: 0,
+					pointer-events: none,
+					position: absolute,
+					right: 0,
+					top: 0,
 				),
+			),
 
-				active-class: (
-					background-color:
-						var(
-							--menubar-primary-nav-link-active-class-background-color,
-							$primary-l3
-						),
-					color:
-						var(
-							--menubar-primary-nav-link-active-class-color,
-							$gray-900
-						),
-					font-weight:
-						var(
-							--menubar-primary-nav-link-active-class-font-weight,
-							$font-weight-semi-bold
-						),
-					before: (
-						background-color:
-							var(
-								--menubar-primary-nav-link-active-class-highlight-background-color,
-								$primary
-							),
-						height:
-							var(
-								--menubar-primary-nav-link-active-class-highlight-height,
-								auto
-							),
-						width:
-							var(
-								--menubar-primary-nav-link-active-class-highlight-width,
-								0.375rem
-							),
+			active-class: (
+				background-color:
+					var(
+						--menubar-primary-nav-link-active-class-background-color,
+						$primary-l3
 					),
-
-					focus: (
-						before: (
-							display: none,
-						),
+				color:
+					var(
+						--menubar-primary-nav-link-active-class-color,
+						$gray-900
 					),
-				),
-
-				disabled: (
+				font-weight:
+					var(
+						--menubar-primary-nav-link-active-class-font-weight,
+						$font-weight-semi-bold
+					),
+				before: (
 					background-color:
 						var(
-							--menubar-primary-nav-link-disabled-background-color,
-							transparent
+							--menubar-primary-nav-link-active-class-highlight-background-color,
+							$primary
 						),
-					box-shadow:
+					height:
 						var(
-							--menubar-primary-nav-link-disabled-box-shadow,
-							none
+							--menubar-primary-nav-link-active-class-highlight-height,
+							auto
 						),
-					font-weight:
+					width:
 						var(
-							--menubar-primary-nav-link-disabled-font-weight,
-							$font-weight-normal
+							--menubar-primary-nav-link-active-class-highlight-width,
+							0.375rem
 						),
+				),
+
+				focus: (
 					before: (
-						content: none,
+						display: none,
 					),
+				),
+			),
 
-					after: (
-						content: none,
+			disabled: (
+				background-color:
+					var(
+						--menubar-primary-nav-link-disabled-background-color,
+						transparent
+					),
+				box-shadow:
+					var(--menubar-primary-nav-link-disabled-box-shadow, none),
+				font-weight:
+					var(
+						--menubar-primary-nav-link-disabled-font-weight,
+						$font-weight-normal
 					),
+				before: (
+					content: none,
+				),
+
+				after: (
+					content: none,
 				),
+			),
 
-				show: (
-					background-color: c-unset,
-					box-shadow: c-unset,
-					color: $gray-900,
+			show: (
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: $gray-900,
+
+				before: (
+					background-color: transparent,
+					width: 0,
+				),
 
+				hover: (
 					before: (
-						background-color: transparent,
-						width: 0,
+						background-color: $secondary-l0,
+						width: 0.125rem,
 					),
+				),
+			),
 
-					hover: (
-						before: (
-							background-color: $secondary-l0,
-							width: 0.125rem,
+			autofit-row: (
+				align-items: center,
+				margin-left:
+					var(--menubar-primary-autofit-row-margin-left, -0.25rem),
+				margin-right:
+					var(--menubar-primary-autofit-row-margin-right, -0.25rem),
+				autofit-col: (
+					padding-left:
+						var(--menubar-primary-autofit-col-padding-left, 0.25rem),
+					padding-right:
+						var(
+							--menubar-primary-autofit-col-padding-right,
+							0.25rem
 						),
-					),
 				),
+			),
 
-				autofit-row: (
-					align-items: center,
-					margin-left:
+			collapse-icon: (
+				font-size:
+					var(--menubar-primary-collapse-icon-font-size, 0.75rem),
+				font-weight:
+					var(
+						--menubar-primary-collapse-icon-font-weight,
+						$font-weight-semi-bold
+					),
+				text-transform:
+					var(
+						--menubar-primary-collapse-icon-text-transform,
+						uppercase
+					),
+				collapse-icon-closed: (
+					bottom:
+						var(--menubar-primary-collapse-icon-close-bottom, auto),
+					font-size:
 						var(
-							--menubar-primary-autofit-row-margin-left,
-							-0.25rem
+							--menubar-primary-collapse-icon-close-font-size,
+							0.875rem
 						),
-					margin-right:
+					left: var(--menubar-primary-collapse-icon-close-left, auto),
+					right:
+						var(--menubar-primary-collapse-icon-close-right, 15px),
+					top:
 						var(
-							--menubar-primary-autofit-row-margin-right,
-							-0.25rem
+							--menubar-primary-collapse-icon-close-top,
+							calc(22px - (1em / 2))
 						),
-					autofit-col: (
-						padding-left:
-							var(
-								--menubar-primary-autofit-col-padding-left,
-								0.25rem
-							),
-						padding-right:
-							var(
-								--menubar-primary-autofit-col-padding-right,
-								0.25rem
-							),
-					),
 				),
 
-				collapse-icon: (
+				collapse-icon-open: (
+					bottom:
+						var(--menubar-primary-collapse-icon-open-bottom, auto),
 					font-size:
-						var(--menubar-primary-collapse-icon-font-size, 0.75rem),
-					font-weight:
 						var(
-							--menubar-primary-collapse-icon-font-weight,
-							$font-weight-semi-bold
+							--menubar-primary-collapse-icon-open-font-size,
+							0.875rem
 						),
-					text-transform:
+					left: var(--menubar-primary-collapse-icon-open-left, auto),
+					right: var(--menubar-primary-collapse-icon-open-right, 15px),
+					top:
 						var(
-							--menubar-primary-collapse-icon-text-transform,
-							uppercase
+							--menubar-primary-collapse-icon-open-top,
+							calc(22px - (1em / 2))
 						),
-					collapse-icon-closed: (
-						bottom:
-							var(
-								--menubar-primary-collapse-icon-close-bottom,
-								auto
-							),
-						font-size:
-							var(
-								--menubar-primary-collapse-icon-close-font-size,
-								0.875rem
-							),
-						left:
-							var(
-								--menubar-primary-collapse-icon-close-left,
-								auto
-							),
-						right:
-							var(
-								--menubar-primary-collapse-icon-close-right,
-								15px
-							),
-						top:
-							var(
-								--menubar-primary-collapse-icon-close-top,
-								calc(22px - (1em / 2))
-							),
-					),
-
-					collapse-icon-open: (
-						bottom:
-							var(
-								--menubar-primary-collapse-icon-open-bottom,
-								auto
-							),
-						font-size:
-							var(
-								--menubar-primary-collapse-icon-open-font-size,
-								0.875rem
-							),
-						left:
-							var(
-								--menubar-primary-collapse-icon-open-left,
-								auto
-							),
-						right:
-							var(
-								--menubar-primary-collapse-icon-open-right,
-								15px
-							),
-						top:
-							var(
-								--menubar-primary-collapse-icon-open-top,
-								calc(22px - (1em / 2))
-							),
-					),
 				),
 			),
+		),
 
-			menubar-actions-1: (
-				padding-right: var(--menubar-primary-menubar-actions-1, 4rem),
-			),
-
-			menubar-action: (
-				position: absolute,
-				top: var(--menubar-primary-menubar-action-top, 0.625rem),
-				right: var(--menubar-primary-menubar-action-right, 2rem),
-			),
+		menubar-actions-1: (
+			padding-right: var(--menubar-primary-menubar-actions-1, 4rem),
 		),
-		$menubar-primary
-	);
 
-	// Menubar Vertical MD
+		menubar-action: (
+			position: absolute,
+			top: var(--menubar-primary-menubar-action-top, 0.625rem),
+			right: var(--menubar-primary-menubar-action-right, 2rem),
+		),
+	),
+	$menubar-primary
+);
 
-	$menubar-vertical-expand-md: ();
-	$menubar-vertical-expand-md: map-deep-merge(
-		(
-			max-width: 15.625rem,
+// Menubar Vertical MD
 
-			menubar-collapse: (
-				display: block,
-			),
+$menubar-vertical-expand-md: () !default;
+$menubar-vertical-expand-md: map-deep-merge(
+	(
+		max-width: 15.625rem,
 
-			media-breakpoint-down: (
-				sm: (
-					margin-bottom: 1rem,
-					max-width: none,
+		menubar-collapse: (
+			display: block,
+		),
 
-					menubar-collapse: (
-						border-color: transparent,
-						border-style: solid,
-						border-width: 0.0625rem,
-						display: none,
-						position: relative,
-						top: 100%,
-						z-index:
-							$zindex-menubar-vertical-expand-md-collapse-mobile,
-					),
+		media-breakpoint-down: (
+			sm: (
+				margin-bottom: 1rem,
+				max-width: none,
+
+				menubar-collapse: (
+					border-color: transparent,
+					border-style: solid,
+					border-width: 0.0625rem,
+					display: none,
+					position: relative,
+					top: 100%,
+					z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
+				),
 
-					nav-nested: (
-						margin-bottom: 0.5rem,
-						margin-top: 0.5rem,
-					),
+				nav-nested: (
+					margin-bottom: 0.5rem,
+					margin-top: 0.5rem,
+				),
 
-					nav-nested-margins: (
-						margin-bottom: 0.5rem,
-						margin-top: 0.5rem,
-					),
+				nav-nested-margins: (
+					margin-bottom: 0.5rem,
+					margin-top: 0.5rem,
+				),
 
-					nav-nested-margins-item: (
-						margin-left: 0rem,
-					),
+				nav-nested-margins-item: (
+					margin-left: 0rem,
+				),
 
-					menubar-toggler: (
-						align-items: center,
-						border-color: transparent,
-						border-style: solid,
-						border-width: 0.0625rem,
-						display: inline-flex,
-						height: 2rem,
-						padding-left: 0.5rem,
-						padding-right: 0.5rem,
+				menubar-toggler: (
+					align-items: center,
+					border-color: transparent,
+					border-style: solid,
+					border-width: 0.0625rem,
+					display: inline-flex,
+					height: 2rem,
+					padding-left: 0.5rem,
+					padding-right: 0.5rem,
 
-						c-inner: (
-							margin-left: -0.5rem,
-							margin-right: -0.5rem,
-							max-width: none,
-						),
+					c-inner: (
+						margin-left: -0.5rem,
+						margin-right: -0.5rem,
+						max-width: none,
+					),
 
-						lexicon-icon: (
-							margin-top: 0rem,
-						),
+					lexicon-icon: (
+						margin-top: 0rem,
 					),
 				),
 			),
 		),
-		$menubar-vertical-expand-md
-	);
-
-	$menubar-vertical-transparent-md: ();
-	$menubar-vertical-transparent-md: map-deep-merge(
-		(
-			nav-link: (
-				border-radius: $border-radius,
-				letter-spacing: 0.02rem,
-				line-height: 1.25rem,
-				margin-bottom: 0.25rem,
-				transition: #{color 0.15s ease-in-out,
-				background-color 0.15s ease-in-out,
-				border-color 0.15s ease-in-out,
-				box-shadow 0.15s ease-in-out},
+	),
+	$menubar-vertical-expand-md
+);
+
+$menubar-vertical-transparent-md: () !default;
+$menubar-vertical-transparent-md: map-deep-merge(
+	(
+		nav-link: (
+			border-radius: $border-radius,
+			letter-spacing: 0.02rem,
+			line-height: 1.25rem,
+			margin-bottom: 0.25rem,
+			transition: #{color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out},
+
+			before: (
+				border-radius: $border-radius 0 0 $border-radius,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+			),
+
+			hover: (
+				background-color: unquote('hsl(from #{$gray-900} h s l / 0.04)'),
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
+				letter-spacing: 0,
 
 				before: (
-					border-radius: $border-radius 0 0 $border-radius,
+					background: $secondary-l0,
+					width: 0.1875rem,
+				),
+			),
+
+			focus: (
+				background-color: c-unset,
+				color: $gray-900,
+				outline: 0,
+
+				after: (
+					border-radius: $border-radius,
 					bottom: 0,
+					box-shadow: $component-focus-box-shadow,
 					content: '',
 					display: block,
 					left: 0,
+					pointer-events: none,
 					position: absolute,
+					right: 0,
 					top: 0,
 				),
+			),
 
-				hover: (
-					background-color:
-						unquote('hsl(from #{$gray-900} h s l / 0.04)'),
-					color: $gray-900,
-					font-weight: $font-weight-semi-bold,
-					letter-spacing: 0,
+			active-class: (
+				background-color: unquote('hsl(from #{$primary} h s l / 0.06)'),
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
+				letter-spacing: 0,
 
-					before: (
-						background: $secondary-l0,
-						width: 0.1875rem,
-					),
+				before: (
+					background-color: $primary-l0,
+					width: 0.25rem,
 				),
+			),
 
-				focus: (
-					background-color: c-unset,
-					color: $gray-900,
-					outline: 0,
+			disabled: (
+				background-color: transparent,
+				box-shadow: none,
+				font-weight: $font-weight-normal,
+				letter-spacing: 0.02rem,
 
-					after: (
-						border-radius: $border-radius,
-						bottom: 0,
-						box-shadow: $component-focus-box-shadow,
-						content: '',
-						display: block,
-						left: 0,
-						pointer-events: none,
-						position: absolute,
-						right: 0,
-						top: 0,
-					),
+				before: (
+					content: none,
 				),
 
-				active-class: (
-					background-color:
-						unquote('hsl(from #{$primary} h s l / 0.06)'),
-					color: $gray-900,
-					font-weight: $font-weight-semi-bold,
-					letter-spacing: 0,
-
-					before: (
-						background-color: $primary-l0,
-						width: 0.25rem,
-					),
+				after: (
+					content: none,
 				),
+			),
+
+			show: (
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
 
-				disabled: (
+				before: (
 					background-color: transparent,
-					box-shadow: none,
-					font-weight: $font-weight-normal,
-					letter-spacing: 0.02rem,
+				),
 
+				hover: (
 					before: (
-						content: none,
-					),
-
-					after: (
-						content: none,
+						background-color: $secondary-l0,
+						width: 0.1875rem,
 					),
 				),
+			),
+		),
 
-				show: (
-					background-color: c-unset,
-					box-shadow: c-unset,
-					color: $gray-900,
-					font-weight: $font-weight-semi-bold,
+		media-breakpoint-down: (
+			sm: (
+				background-color: $white,
+
+				nav-link: (
+					margin-bottom: 0,
 
 					before: (
-						background-color: transparent,
+						content: none,
 					),
 
 					hover: (
-						before: (
-							background-color: $secondary-l0,
-							width: 0.1875rem,
-						),
+						background-color:
+							unquote('hsl(from #{$gray-900} h s l / 0.04)'),
+						box-shadow: none,
 					),
-				),
-			),
-
-			media-breakpoint-down: (
-				sm: (
-					background-color: $white,
-
-					nav-link: (
-						margin-bottom: 0,
-
-						before: (
-							content: none,
-						),
-
-						hover: (
-							background-color:
-								unquote('hsl(from #{$gray-900} h s l / 0.04)'),
-							box-shadow: none,
-						),
 
-						focus: (
-							background-color: transparent,
+					focus: (
+						background-color: transparent,
 
-							after: (
-								box-shadow: $component-focus-inset-box-shadow,
-							),
+						after: (
+							box-shadow: $component-focus-inset-box-shadow,
 						),
+					),
 
-						active: (
-							background-color: c-unset,
-							color: c-unset,
-						),
+					active: (
+						background-color: c-unset,
+						color: c-unset,
+					),
 
-						active-class: (
-							background-color:
-								unquote('hsl(from #{$primary} h s l / 0.06)'),
-							box-shadow: none,
-							color: c-unset,
-						),
+					active-class: (
+						background-color:
+							unquote('hsl(from #{$primary} h s l / 0.06)'),
+						box-shadow: none,
+						color: c-unset,
 					),
+				),
 
-					menubar-toggler: (
-						color: $gray-600,
-						font-size: 0.875rem,
-						font-weight: $font-weight-semi-bold,
-						transition: box-shadow 0.15s ease-in-out,
+				menubar-toggler: (
+					color: $gray-600,
+					font-size: 0.875rem,
+					font-weight: $font-weight-semi-bold,
+					transition: box-shadow 0.15s ease-in-out,
 
-						focus: (
-							box-shadow: $component-focus-box-shadow,
-							outline: 0,
-						),
+					focus: (
+						box-shadow: $component-focus-box-shadow,
+						outline: 0,
+					),
 
-						disabled: (
-							box-shadow: clay-enable-shadows(none),
-						),
+					disabled: (
+						box-shadow: clay-enable-shadows(none),
 					),
 				),
 			),
 		),
-		$menubar-vertical-transparent-md
-	);
-
-	$menubar-vertical-decorated-md-nav: ();
-	$menubar-vertical-decorated-md-nav: map-deep-merge(
-		(
-			border-left-color: $gray-300,
-			border-left-style: solid,
-			border-left-width: 0.125rem,
-			display: block,
-			padding-left: 0.5rem,
-		),
-		$menubar-vertical-decorated-md-nav
-	);
+	),
+	$menubar-vertical-transparent-md
+);
+
+$menubar-vertical-decorated-md-nav: () !default;
+$menubar-vertical-decorated-md-nav: map-deep-merge(
+	(
+		border-left-color: $gray-300,
+		border-left-style: solid,
+		border-left-width: 0.125rem,
+		display: block,
+		padding-left: 0.5rem,
+	),
+	$menubar-vertical-decorated-md-nav
+);
+
+$menubar-vertical-decorated-md-nav-item-nav: () !default;
+$menubar-vertical-decorated-md-nav-item-nav: map-deep-merge(
+	(
+		margin-bottom: 0.25rem,
+		margin-left: 1rem,
+		margin-top: 0.25rem,
+	),
+	$menubar-vertical-decorated-md-nav-item-nav
+);
+
+$menubar-vertical-decorated-md-nav-link: () !default;
+$menubar-vertical-decorated-md-nav-link: map-deep-merge(
+	(
+		padding-left: 1rem !important,
+	),
+	$menubar-vertical-decorated-md-nav-link
+);
+
+$menubar-vertical-decorated-md-nav-link-after-active: () !default;
+$menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge(
+	(
+		background-color: $primary-l2,
+		bottom: 0rem,
+		content: '',
+		display: block,
+		left:
+			calc(
+				#{map-get($menubar-vertical-decorated-md-nav, padding-left)} * -1 -
+					#{map-get(
+						$menubar-vertical-decorated-md-nav,
+						border-left-width
+					)}
+			),
+		position: absolute,
+		top: 0rem,
+		width: map-get($menubar-vertical-decorated-md-nav, border-left-width),
+	),
+	$menubar-vertical-decorated-md-nav-link-after-active
+);
 
-	$menubar-vertical-decorated-md-nav-item-nav: ();
-	$menubar-vertical-decorated-md-nav-item-nav: map-deep-merge(
-		(
-			margin-bottom: 0.25rem,
-			margin-left: 1rem,
-			margin-top: 0.25rem,
-		),
-		$menubar-vertical-decorated-md-nav-item-nav
-	);
+// Menubar Vertical LG
 
-	$menubar-vertical-decorated-md-nav-link: ();
-	$menubar-vertical-decorated-md-nav-link: map-deep-merge(
-		(
-			padding-left: 1rem !important,
-		),
-		$menubar-vertical-decorated-md-nav-link
-	);
-
-	$menubar-vertical-decorated-md-nav-link-after-active: ();
-	$menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge(
-		(
-			background-color: $primary-l2,
-			bottom: 0rem,
-			content: '',
+$menubar-vertical-expand-lg: () !default;
+$menubar-vertical-expand-lg: map-deep-merge(
+	(
+		max-width: 15.625rem,
+
+		menubar-collapse: (
 			display: block,
-			left:
-				calc(
-					#{map-get(
-							$menubar-vertical-decorated-md-nav,
-							padding-left
-						)} *
-						-1 -
-						#{map-get(
-							$menubar-vertical-decorated-md-nav,
-							border-left-width
-						)}
-				),
-			position: absolute,
-			top: 0rem,
-			width:
-				map-get($menubar-vertical-decorated-md-nav, border-left-width),
 		),
-		$menubar-vertical-decorated-md-nav-link-after-active
-	);
 
-	// Menubar Vertical LG
-
-	$menubar-vertical-expand-lg: ();
-	$menubar-vertical-expand-lg: map-deep-merge(
-		(
-			max-width: 15.625rem,
-
-			menubar-collapse: (
-				display: block,
-			),
+		media-breakpoint-down: (
+			md: (
+				margin-bottom: 1rem,
+				max-width: none,
+
+				menubar-collapse: (
+					border-color: transparent,
+					border-style: solid,
+					border-width: 0.0625rem,
+					display: none,
+					position: relative,
+					top: 100%,
+					z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
+				),
 
-			media-breakpoint-down: (
-				md: (
-					margin-bottom: 1rem,
-					max-width: none,
+				nav-nested: (
+					margin-bottom: 0.5rem,
+					margin-top: 0.5rem,
+				),
 
-					menubar-collapse: (
-						border-color: transparent,
-						border-style: solid,
-						border-width: 0.0625rem,
-						display: none,
-						position: relative,
-						top: 100%,
-						z-index:
-							$zindex-menubar-vertical-expand-md-collapse-mobile,
-					),
+				nav-nested-margins: (
+					margin-bottom: 0.5rem,
+					margin-top: 0.5rem,
+				),
 
-					nav-nested: (
-						margin-bottom: 0.5rem,
-						margin-top: 0.5rem,
-					),
+				nav-nested-margins-item: (
+					margin-left: 0rem,
+				),
 
-					nav-nested-margins: (
-						margin-bottom: 0.5rem,
-						margin-top: 0.5rem,
-					),
+				menubar-toggler: (
+					align-items: center,
+					border-color: transparent,
+					border-style: solid,
+					border-width: 0.0625rem,
+					display: inline-flex,
+					height: 2rem,
+					padding-left: 0.5rem,
+					padding-right: 0.5rem,
 
-					nav-nested-margins-item: (
-						margin-left: 0rem,
+					c-inner: (
+						margin-left: -0.5rem,
+						margin-right: -0.5rem,
+						max-width: none,
 					),
 
-					menubar-toggler: (
-						align-items: center,
-						border-color: transparent,
-						border-style: solid,
-						border-width: 0.0625rem,
-						display: inline-flex,
-						height: 2rem,
-						padding-left: 0.5rem,
-						padding-right: 0.5rem,
-
-						c-inner: (
-							margin-left: -0.5rem,
-							margin-right: -0.5rem,
-							max-width: none,
-						),
-
-						lexicon-icon: (
-							margin-top: 0rem,
-						),
+					lexicon-icon: (
+						margin-top: 0rem,
 					),
 				),
 			),
 		),
-		$menubar-vertical-expand-lg
-	);
-
-	$menubar-vertical-transparent-lg: ();
-	$menubar-vertical-transparent-lg: map-deep-merge(
-		(
-			nav-link: (
-				border-radius: $border-radius,
-				letter-spacing: 0.02rem,
-				margin-bottom: 0.25rem,
-				transition: #{color 0.15s ease-in-out,
-				background-color 0.15s ease-in-out,
-				border-color 0.15s ease-in-out,
-				box-shadow 0.15s ease-in-out},
+	),
+	$menubar-vertical-expand-lg
+);
+
+$menubar-vertical-transparent-lg: () !default;
+$menubar-vertical-transparent-lg: map-deep-merge(
+	(
+		nav-link: (
+			border-radius: $border-radius,
+			letter-spacing: 0.02rem,
+			margin-bottom: 0.25rem,
+			transition: #{color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out},
+
+			before: (
+				border-radius: $border-radius 0 0 $border-radius,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+			),
+
+			hover: (
+				background-color: unquote('hsl(from #{$gray-900} h s l / 0.04)'),
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
+				letter-spacing: 0,
 
 				before: (
-					border-radius: $border-radius 0 0 $border-radius,
+					background: $secondary-l0,
+					width: 0.1875rem,
+				),
+			),
+
+			focus: (
+				background-color: c-unset,
+				color: $gray-900,
+				outline: 0,
+
+				after: (
+					border-radius: $border-radius,
 					bottom: 0,
+					box-shadow: $component-focus-box-shadow,
 					content: '',
 					display: block,
 					left: 0,
 					position: absolute,
+					right: 0,
 					top: 0,
 				),
+			),
 
-				hover: (
-					background-color:
-						unquote('hsl(from #{$gray-900} h s l / 0.04)'),
-					color: $gray-900,
-					font-weight: $font-weight-semi-bold,
-					letter-spacing: 0,
+			active-class: (
+				background-color: unquote('hsl(from #{$primary} h s l / 0.06)'),
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
+				letter-spacing: 0,
 
-					before: (
-						background: $secondary-l0,
-						width: 0.1875rem,
-					),
+				before: (
+					background-color: $primary-l0,
+					width: 0.25rem,
 				),
+			),
 
-				focus: (
-					background-color: c-unset,
-					color: $gray-900,
-					outline: 0,
+			disabled: (
+				background-color: transparent,
+				box-shadow: none,
+				font-weight: $font-weight-normal,
+				letter-spacing: 0.02rem,
 
-					after: (
-						border-radius: $border-radius,
-						bottom: 0,
-						box-shadow: $component-focus-box-shadow,
-						content: '',
-						display: block,
-						left: 0,
-						position: absolute,
-						right: 0,
-						top: 0,
-					),
+				before: (
+					content: none,
 				),
 
-				active-class: (
-					background-color:
-						unquote('hsl(from #{$primary} h s l / 0.06)'),
-					color: $gray-900,
-					font-weight: $font-weight-semi-bold,
-					letter-spacing: 0,
-
-					before: (
-						background-color: $primary-l0,
-						width: 0.25rem,
-					),
+				after: (
+					content: none,
 				),
+			),
+
+			show: (
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
 
-				disabled: (
+				before: (
 					background-color: transparent,
-					box-shadow: none,
-					font-weight: $font-weight-normal,
-					letter-spacing: 0.02rem,
+				),
 
+				hover: (
 					before: (
-						content: none,
-					),
-
-					after: (
-						content: none,
+						background-color: $secondary-l0,
+						width: 0.1875rem,
 					),
 				),
+			),
+		),
 
-				show: (
-					background-color: c-unset,
-					box-shadow: c-unset,
-					color: $gray-900,
-					font-weight: $font-weight-semi-bold,
+		media-breakpoint-down: (
+			md: (
+				background-color: $white,
+
+				nav-link: (
+					margin-bottom: 0,
 
 					before: (
-						background-color: transparent,
+						content: none,
 					),
 
 					hover: (
-						before: (
-							background-color: $secondary-l0,
-							width: 0.1875rem,
-						),
+						background-color:
+							unquote('hsl(from #{$gray-900} h s l / 0.04)'),
+						box-shadow: none,
 					),
-				),
-			),
-
-			media-breakpoint-down: (
-				md: (
-					background-color: $white,
-
-					nav-link: (
-						margin-bottom: 0,
-
-						before: (
-							content: none,
-						),
-
-						hover: (
-							background-color:
-								unquote('hsl(from #{$gray-900} h s l / 0.04)'),
-							box-shadow: none,
-						),
 
-						focus: (
-							background-color: transparent,
+					focus: (
+						background-color: transparent,
 
-							after: (
-								box-shadow: $component-focus-inset-box-shadow,
-							),
+						after: (
+							box-shadow: $component-focus-inset-box-shadow,
 						),
+					),
 
-						active: (
-							background-color: c-unset,
-							color: c-unset,
-						),
+					active: (
+						background-color: c-unset,
+						color: c-unset,
+					),
 
-						active-class: (
-							background-color:
-								unquote('hsl(from #{$primary} h s l / 0.06)'),
-							box-shadow: none,
-							color: $gray-900,
-						),
+					active-class: (
+						background-color:
+							unquote('hsl(from #{$primary} h s l / 0.06)'),
+						box-shadow: none,
+						color: $gray-900,
 					),
+				),
 
-					menubar-toggler: (
-						color: $gray-600,
-						font-size: 0.875rem,
-						font-weight: $font-weight-semi-bold,
-						transition: box-shadow 0.15s ease-in-out,
+				menubar-toggler: (
+					color: $gray-600,
+					font-size: 0.875rem,
+					font-weight: $font-weight-semi-bold,
+					transition: box-shadow 0.15s ease-in-out,
 
-						focus: (
-							box-shadow:
-								clay-enable-shadows(
-									$component-focus-box-shadow
-								),
-							outline: 0,
-						),
+					focus: (
+						box-shadow:
+							clay-enable-shadows($component-focus-box-shadow),
+						outline: 0,
+					),
 
-						disabled: (
-							box-shadow: clay-enable-shadows(none),
-						),
+					disabled: (
+						box-shadow: clay-enable-shadows(none),
 					),
 				),
 			),
 		),
-		$menubar-vertical-transparent-lg
-	);
-
-	$menubar-vertical-decorated-lg-nav: ();
-	$menubar-vertical-decorated-lg-nav: map-deep-merge(
-		$menubar-vertical-decorated-md-nav,
-		$menubar-vertical-decorated-lg-nav
-	);
-
-	$menubar-vertical-decorated-lg-nav-item-nav: ();
-	$menubar-vertical-decorated-lg-nav-item-nav: map-deep-merge(
-		$menubar-vertical-decorated-md-nav-item-nav,
-		$menubar-vertical-decorated-lg-nav-item-nav
-	);
-
-	$menubar-vertical-decorated-lg-nav-link: ();
-	$menubar-vertical-decorated-lg-nav-link: map-deep-merge(
-		$menubar-vertical-decorated-md-nav-link,
-		$menubar-vertical-decorated-lg-nav-link
-	);
-
-	$menubar-vertical-decorated-lg-nav-link-after-active: ();
-	$menubar-vertical-decorated-lg-nav-link-after-active: map-deep-merge(
-		$menubar-vertical-decorated-md-nav-link-after-active,
-		$menubar-vertical-decorated-lg-nav-link-after-active
-	);
-}
+	),
+	$menubar-vertical-transparent-lg
+);
+
+$menubar-vertical-decorated-lg-nav: () !default;
+$menubar-vertical-decorated-lg-nav: map-deep-merge(
+	$menubar-vertical-decorated-md-nav,
+	$menubar-vertical-decorated-lg-nav
+);
+
+$menubar-vertical-decorated-lg-nav-item-nav: () !default;
+$menubar-vertical-decorated-lg-nav-item-nav: map-deep-merge(
+	$menubar-vertical-decorated-md-nav-item-nav,
+	$menubar-vertical-decorated-lg-nav-item-nav
+);
+
+$menubar-vertical-decorated-lg-nav-link: () !default;
+$menubar-vertical-decorated-lg-nav-link: map-deep-merge(
+	$menubar-vertical-decorated-md-nav-link,
+	$menubar-vertical-decorated-lg-nav-link
+);
+
+$menubar-vertical-decorated-lg-nav-link-after-active: () !default;
+$menubar-vertical-decorated-lg-nav-link-after-active: map-deep-merge(
+	$menubar-vertical-decorated-md-nav-link-after-active,
+	$menubar-vertical-decorated-lg-nav-link-after-active
+);