$enable-scaling-navbar: $enable-scaling-components !default;

$navbar-border-radius: var(--navbar-border-radius, 0px) !default;
$navbar-font-size: var(--navbar-font-size, 14px) !default;
$navbar-padding-x: var(--navbar-padding-x, $spacer) !default;
$navbar-padding-y: var(--navbar-padding-y, calc(#{$spacer} * 0.5)) !default;

$navbar-nav-link-padding-x: var(--navbar-nav-link-padding-x, 8px) !default;

$navbar-title-font-size: var(--navbar-title-font-size, 20px) !default;
$navbar-title-font-weight: var(
	--navbar-title-font-weight,
	$font-weight-semi-bold
) !default;
$navbar-title-margin-bottom: var(--navbar-title-margin-bottom, 0) !default;
$navbar-title-text-transform: var(--navbar-title-text-transform, none) !default;

$navbar-text-truncate-spacer-right: var(
	--navbar-text-truncate-spacer-right,
	25px
) !default;
$navbar-text-truncate-max-width: var(
	--navbar-text-truncate-max-width,
	200px
) !default;

$navbar-text-truncate: () !default;
$navbar-text-truncate: map-deep-merge(
	(
		display: inline-block,
		max-width: 100%,
		overflow: hidden,
		text-overflow: ellipsis,
		vertical-align: bottom,
		white-space: nowrap,
	),
	$navbar-text-truncate
);

// Navbar Brand

$navbar-brand-font-size: var(--navbar-brand-font-size, $font-size-lg) !default;

// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link

$nav-link-height: var(
	--nav-link-height,
	calc(#{$font-size-base} * #{$line-height-base} + #{$nav-link-padding-y} * 2)
) !default;

$navbar-brand-height: var(
	--navbar-brand-height,
	calc(#{$navbar-brand-font-size} * #{$line-height-base})
) !default;

$navbar-brand-padding-y: var(
	--navbar-brand-padding-y,
	calc((#{$nav-link-height} - #{$navbar-brand-height}) * 0.5)
) !default;

// Navbar Toggler

$navbar-toggler-border-radius: var(
	--navbar-toggler-border-radius,
	$border-radius
) !default;
$navbar-toggler-cursor: null !default;
$navbar-toggler-font-size: var(
	--navbar-toggler-font-size,
	$font-size-lg
) !default;
$navbar-toggler-padding-x: var(--navbar-toggler-padding-x, 12px) !default;
$navbar-toggler-padding-y: var(--navbar-toggler-padding-y, 4px) !default;

// Navbar Underline

$navbar-underline-active-bg: unquote(
	'hsl(from #{$component-active-bg} h s calc(l + 22.94))'
) !default;

$navbar-underline: () !default;
$navbar-underline: map-deep-merge(
	(
		navbar-toggler-link: (
			after: (
				background-color: $navbar-underline-active-bg,
				bottom: calc(#{$navbar-padding-y} * -1),
				content: '',
				display: block,
				height: 0.25rem,
				left: 0,
				position: absolute,
				right: 0,
				width: auto,
			),
		),

		media-breakpoint-up: (
			md: (
				navbar-expand-md: (
					navbar-underline: (
						navbar-nav: (
							nav-link: (
								active-class: (
									after: (
										background-color:
											$navbar-underline-active-bg,
										bottom: calc(#{$navbar-padding-y} * -1),
										content: '',
										display: block,
										height: 0.25rem,
										left: 0,
										position: absolute,
										right: 0,
										width: auto,
									),
								),
							),
						),
					),
				),
			),
		),
	),
	$navbar-underline
);

// Navbar Dark

$navbar-dark-color: var(--navbar-dark-color, $white) !default;

$navbar-dark-hover-color: var(
	--navbar-dark-hover-color,
	$navbar-dark-color
) !default;

$navbar-dark-active-color: var(
	--navbar-dark-active-color,
	$navbar-dark-color
) !default;

$navbar-dark-disabled-color: var(
	--navbar-dark-disabled-color,
	$nav-link-disabled-color
) !default;

$navbar-dark-brand-color: var(
	--navbar-dark-brand-color,
	$navbar-dark-active-color
) !default;

$navbar-dark-brand-hover-color: var(
	--navbar-dark-brand-hover-color,
	$navbar-dark-active-color
) !default;

$navbar-dark-toggler-border-color: var(
	--navbar-dark-toggler-border-color,
	unquote('hsl(from #{$white} h s l / 0.1)')
) !default;

$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;

// Navbar Light

$navbar-light-color: var(--navbar-light-color, $gray-600) !default;

$navbar-light-hover-color: var(
	--navbar-light-hover-color,
	$navbar-light-color
) !default;

$navbar-light-active-color: var(
	--navbar-light-active-color,
	$gray-900
) !default;

$navbar-light-disabled-color: var(
	--navbar-light-disabled-color,
	$nav-link-disabled-color
) !default;

$navbar-light-brand-color: var(
	--navbar-light-brand-color,
	$navbar-light-active-color
) !default;

$navbar-light-brand-hover-color: var(
	--navbar-light-brand-hover-color,
	$navbar-light-active-color
) !default;

$navbar-light-toggler-border-color: var(
	--navbar-light-toggler-border-color,
	unquote('hsl(from #{$black} h s l / 0.1)')
) !default;

$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#272833' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;