////
/// @group menubar
////

/// A mixin for creating alternate breakpoints for `.menubar-vertical-expand-{breakpoint}`.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// breakpoint-up: {String}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
/// breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// border-color: {Color | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// max-width: {String | Number}, // Default: 15.625rem
/// border-color-mobile: {Color | String | List}, // Default: transparent
/// border-style-mobile: {String | List}, // Default: solid
/// border-width-mobile: {Number | String | List}, // Default: 0.0625rem
/// margin-bottom-mobile: {Number | String | Null},
/// margin-left-mobile: {Number | String | Null},
/// margin-right-mobile: {Number | String | Null},
/// margin-top-mobile: {Number | String | Null},
/// max-width-mobile: {Number | String}, // Default: none
/// min-height-mobile: {Number | String}, // Default: 3rem
/// padding-x-mobile: {Number | String}, // Default: 0.5rem
/// padding-y-mobile: {Number | String | Null},
/// collapse-border-color-mobile: {Color | String}, // Default: transparent
/// collapse-border-style-mobile: {String | List}, // Default: solid
/// collapse-border-width-mobile: {Number | String | List}, // Default: 0.0625rem
/// collapse-inner-spacer-y-mobile: {Number | String}, // Default: 0.5rem
/// collapse-margin-top-mobile: {Number | String | Null},
/// collapse-max-width-mobile: {Number | String | Null},
/// collapse-left-mobile: {Number | String}, // Default: -0.0625rem
/// collapse-right-mobile: {Number | String}, // Default: -0.0625rem
/// collapse-z-index-mobile: {Number | String | Null},
/// toggler-border-color-mobile: {Color | String | List}, // Default: transparent
/// toggler-border-style-mobile: {String | List}, // Default: solid
/// toggler-border-width-mobile: {Number | String | List}, // Default: 0.0625rem
/// toggler-height-mobile: {Number | String}, // Default: 2rem
/// toggler-padding-x-mobile: {Number | String}, // Default: 0.5rem
/// toggler-padding-y-mobile: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-menubar-vertical-expand($map) {
	$enabled: setter(map-get($map, enabled), true);
	$breakpoint-up: setter(map-get($map, breakpoint-up), md);
	$breakpoint-down: clay-breakpoint-prev($breakpoint-up);

	// .menubar-vertical-expand-{md}

	$border-color: map-get($map, border-color);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$max-width: setter(map-get($map, max-width), 15.625rem); // 250px

	$border-color-mobile: setter(map-get($map, border-color-mobile), transparent);
	$border-style-mobile: setter(map-get($map, border-style-mobile), solid);
	$border-width-mobile: setter(map-get($map, border-width-mobile), 0.0625rem); // 1px
	$margin-bottom-mobile: map-get($map, margin-bottom-mobile);
	$margin-left-mobile: map-get($map, margin-left-mobile);
	$margin-right-mobile: map-get($map, margin-right-mobile);
	$margin-top-mobile: map-get($map, margin-top-mobile);
	$max-width-mobile: setter(map-get($map, max-width-mobile), none);
	$min-height-mobile: setter(map-get($map, min-height-mobile), 3rem); // 48px
	$padding-x-mobile: setter(map-get($map, padding-x-mobile), 0.5rem);
	$padding-y-mobile: map-get($map, padding-y-mobile);

	// .menubar-collapse

	$collapse-border-color-mobile: setter(map-get($map, collapse-border-color-mobile), transparent);
	$collapse-border-style-mobile: setter(map-get($map, collapse-border-style-mobile), solid);
	$collapse-border-width-mobile: setter(map-get($map, collapse-border-width-mobile), 0.0625rem); // 1px
	$collapse-inner-spacer-y-mobile: setter(map-get($map, collapse-inner-spacer-y-mobile), 0.5rem); // 8px
	$collapse-margin-top-mobile: map-get($map, collapse-margin-top-mobile);
	$collapse-max-width-mobile: map-get($map, collapse-max-width-mobile);
	$collapse-left-mobile: setter(map-get($map, collapse-left-mobile), -0.0625rem); // -1px
	$collapse-right-mobile: setter(map-get($map, collapse-right-mobile), -0.0625rem); // -1px
	$collapse-z-index-mobile: map-get($map, collapse-z-index-mobile);

	// .menubar-toggler

	$toggler-border-color-mobile: setter(map-get($map, toggler-border-color-mobile), transparent);
	$toggler-border-style-mobile: setter(map-get($map, toggler-border-style-mobile), solid);
	$toggler-border-width-mobile: setter(map-get($map, toggler-border-width-mobile), 0.0625rem); // 1px
	$toggler-height-mobile: setter(map-get($map, toggler-height-mobile), 2rem); // 32px
	$toggler-padding-x-mobile: setter(map-get($map, toggler-padding-x-mobile), 0.5rem); // 8px
	$toggler-padding-y-mobile: map-get($map, toggler-padding-y-mobile);

	@if ($enabled) {
		border-color: $border-color;
		border-style: $border-style;
		border-width: $border-width;
		max-width: $max-width;

		@include media-breakpoint-down($breakpoint-down) {
			align-items: center;
			border-color: $border-color-mobile;
			border-style: $border-style-mobile;
			border-width: $border-width-mobile;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: $margin-bottom-mobile;
			margin-left: $margin-left-mobile;
			margin-right: $margin-right-mobile;
			margin-top: $margin-top-mobile;
			max-width: $max-width-mobile;
			min-height: $min-height-mobile;
			padding-bottom: $padding-y-mobile;
			padding-left: $padding-x-mobile;
			padding-right: $padding-x-mobile;
			padding-top: $padding-y-mobile;
		}

		.menubar-collapse {
			display: block;

			@include media-breakpoint-down($breakpoint-down) {
				border-color: $collapse-border-color-mobile;
				border-style: $collapse-border-style-mobile;
				border-width: $collapse-border-width-mobile;
				display: none;
				left: $collapse-left-mobile;
				margin-top: $collapse-margin-top-mobile;
				max-width: $collapse-max-width-mobile;
				position: absolute;
				right: $collapse-right-mobile;
				top: 100%;
				z-index: $collapse-z-index-mobile;

				> .nav {
					margin-bottom: $collapse-inner-spacer-y-mobile;
					margin-top: $collapse-inner-spacer-y-mobile;
				}
			}

			&.collapsing,
			&.show {
				display: block;
			}
		}

		.menubar-toggler {
			@include media-breakpoint-down($breakpoint-down) {
				align-items: center;
				border-color: $toggler-border-color-mobile;
				border-style: $toggler-border-style-mobile;
				border-width: $toggler-border-width-mobile;
				display: flex;
				height: $toggler-height-mobile;
				padding-bottom: $toggler-padding-y-mobile;
				padding-left: $toggler-padding-x-mobile;
				padding-right: $toggler-padding-x-mobile;
				padding-top: $toggler-padding-y-mobile;

				.lexicon-icon {
					margin-top: 0;
				}
			}
		}
	}
	@else {
		.menubar-collapse {
			display: block;
		}
	}
}

/// A mixin that creates a `menubar-vertical-expand-{breakpoint}` variant.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// breakpoint-up: {String}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
/// breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// bg: {Color | String | Null},
/// border-color: {Color | String | List | Null},
/// border-style: {String | List | Null},
/// // `$link-bg` is deprecated use `$link` instead
/// link-bg: {Color | String | Null},
/// // `$link-border-radius` is deprecated use `$link` instead
/// link-border-radius: {Number | String | List | Null},
/// // `$link-color` is deprecated use `$link` instead
/// link-color: {Color | String}, // Default: $navbar-light-color
/// // `$link-hover-bg` is deprecated use `$link` instead
/// link-hover-bg: {Color | String | Null},
/// // `$link-hover-color` is deprecated use `$link` instead
/// link-hover-color: {Color | String}, // Default: $navbar-light-hover-color
/// // `$link-active-bg` is deprecated use `$link` instead
/// link-active-bg: {Color | String | Null},
/// // `$link-active-color` is deprecated use `$link` instead
/// link-active-color: {Color | String}, // Default: $navbar-light-active-color
/// // `$link-active-font-weight` is deprecated use `$link` instead
/// link-active-font-weight: {Number | String | Null},
/// // `$link-disabled-bg` is deprecated use `$link` instead
/// link-disabled-bg: {Color | String | Null},
/// // `$link-disabled-color` is deprecated use `$link` instead
/// link-disabled-color: {Color | String}, // Default: $navbar-light-disabled-color
/// link: {Map | Null}, // Pass parameters to `clay-link` mixin
/// bg-mobile: {Color | String | Null},
/// border-color-mobile: {Color | String | List | Null},
/// border-style-mobile: {String | List | Null},
/// // `$link-border-radius-mobile` is deprecated use `$link-mobile` instead
/// link-border-radius-mobile: {Number | String | List | Null},
/// // `$link-color-mobile` is deprecated use `$link-mobile` instead
/// link-color-mobile: {Color | String}, // Default: $dropdown-link-color
/// // `$link-hover-bg-mobile` is deprecated use `$link-mobile` instead
/// link-hover-bg-mobile: {Color | String}, // Default: $dropdown-link-hover-bg
/// // `$link-hover-color-mobile` is deprecated use `$link-mobile` instead
/// link-hover-color-mobile: {Color | String}, // Default: $dropdown-link-hover-color
/// // `$link-active-bg-mobile` is deprecated use `$link-mobile` instead
/// link-active-bg-mobile: {Color | String}, // Default: $dropdown-link-active-bg
/// // `$link-active-font-weight-mobile` is deprecated use `$link-mobile` instead
/// link-active-font-weight-mobile: {Number | String}, // Default: $dropdown-link-active-font-weight
/// // `$link-active-color-mobile` is deprecated use `$link-mobile` instead
/// link-active-color-mobile: {Color | String}, // Default: $dropdown-link-active-color
/// // `$link-disabled-bg-mobile` is deprecated use `$link-mobile` instead
/// link-disabled-bg-mobile: {Color | String}, // Default: transparent
/// // `$link-disabled-color-mobile` is deprecated use `$link-mobile` instead
/// link-disabled-color-mobile: {Color | String}, // Default: $dropdown-link-disabled-color
/// link-mobile: {Map | Null}, // Pass parameters to `clay-link` mixin
/// collapse-bg-mobile: {Color | String}, // Default: $dropdown-bg
/// collapse-border-color-mobile: {Color | String}, // Default: $dropdown-border-color
/// collapse-border-radius-mobile: {Number | String | List}, // Default: $border-radius
/// collapse-border-style-mobile: {String | List | Null},
/// collapse-box-shadow-mobile: {String | List}, // Default: $dropdown-box-shadow
/// // `$toggler-border-color-mobile` is deprecated use `$toggler-mobile` instead
/// toggler-border-color-mobile: {Color | String | Null},
/// // `$toggler-border-style-mobile` is deprecated use `$toggler-mobile` instead
/// toggler-border-style-mobile: {String | List | Null},
/// // `$toggler-color-mobile` is deprecated use `$toggler-mobile` instead
/// toggler-color-mobile: {Color | String}, // Default: $link-active-color
/// // `$toggler-font-size-mobile` is deprecated use `$toggler-mobile` instead
/// toggler-font-size-mobile: {Number | String | Null},
/// // `$toggler-font-weight-mobile` is deprecated use `$toggler-mobile` instead
/// toggler-font-weight-mobile: {Number | String | Null},
/// toggler-mobile: {Map | Null}, // Pass parameters to `clay-button-variant` mixin
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-menubar-vertical-variant($map) {
	$enable: setter(map-get($map, enable), true);
	$breakpoint-up: setter(map-get($map, breakpoint-up), md);
	$breakpoint-down: clay-breakpoint-prev($breakpoint-up);

	// .menubar-vertical-expand-{md}.menubar-{variant}

	$bg: map-get($map, bg);
	$border-color: map-get($map, border-color);
	$border-style: map-get($map, border-style);

	$bg-mobile: map-get($map, bg-mobile);
	$border-color-mobile: map-get($map, border-color-mobile);
	$border-style-mobile: map-get($map, border-style-mobile);

	// .nav-link

	// `$link-bg` is deprecated use `$link` instead
	$link-bg: map-get($map, link-bg);
	// `$link-border-radius` is deprecated use `$link` instead
	$link-border-radius: map-get($map, link-border-radius);
	// `$link-color` is deprecated use `$link` instead
	$link-color: setter(map-get($map, link-color), $navbar-light-color);
	// `$link-hover-bg` is deprecated use `$link` instead
	$link-hover-bg: map-get($map, link-hover-bg);
	// `$link-hover-color` is deprecated use `$link` instead
	$link-hover-color: setter(map-get($map, link-hover-color), $navbar-light-hover-color);
	// `$link-active-bg` is deprecated use `$link` instead
	$link-active-bg: map-get($map, link-active-bg);
	// `$link-active-color` is deprecated use `$link` instead
	$link-active-color: setter(map-get($map, link-active-color), $navbar-light-active-color);
	// `$link-active-font-weight` is deprecated use `$link` instead
	$link-active-font-weight: map-get($map, link-active-font-weight);
	// `$link-disabled-bg` is deprecated use `$link` instead
	$link-disabled-bg: map-get($map, link-disabled-bg);
	// `$link-disabled-color` is deprecated use `$link` instead
	$link-disabled-color: setter(map-get($map, link-disabled-color), $navbar-light-disabled-color);

	$link: setter(map-get($map, link), ());
	$link: map-merge((
		bg: $link-bg,
		border-radius: $link-border-radius,
		color: $link-color,
		hover-bg: $link-hover-bg,
		hover-color: $link-hover-color,
		active-bg: $link-active-bg,
		active-color: $link-active-color,
		active-class-font-weight: $link-active-font-weight,
		disabled-bg: $link-disabled-bg,
		disabled-color: $link-disabled-color,
	), $link);

	// `$link-border-radius-mobile` is deprecated use `$link-mobile` instead
	$link-border-radius-mobile: map-get($map, link-border-radius-mobile);
	// `$link-color-mobile` is deprecated use `$link-mobile` instead
	$link-color-mobile: setter(map-get($map, link-color-mobile), $dropdown-link-color);

	// `$link-hover-bg-mobile` is deprecated use `$link-mobile` instead
	$link-hover-bg-mobile: setter(map-get($map, link-hover-bg-mobile), $dropdown-link-hover-bg);
	// `$link-hover-color-mobile` is deprecated use `$link-mobile` instead
	$link-hover-color-mobile: setter(map-get($map, link-hover-color-mobile), $dropdown-link-hover-color);

	// `$link-active-bg-mobile` is deprecated use `$link-mobile` instead
	$link-active-bg-mobile: setter(map-get($map, link-active-bg-mobile), $dropdown-link-active-bg);
	// `$link-active-font-weight-mobile` is deprecated use `$link-mobile` instead
	$link-active-font-weight-mobile: setter(map-get($map, link-active-font-weight-mobile), $dropdown-link-active-font-weight);
	// `$link-active-color-mobile` is deprecated use `$link-mobile` instead
	$link-active-color-mobile: setter(map-get($map, link-active-color-mobile), $dropdown-link-active-color);

	// `$link-disabled-bg-mobile` is deprecated use `$link-mobile` instead
	$link-disabled-bg-mobile: setter(map-get($map, link-disabled-bg-mobile), transparent);
	// `$link-disabled-color-mobile` is deprecated use `$link-mobile` instead
	$link-disabled-color-mobile: setter(map-get($map, link-disabled-color-mobile), $dropdown-link-disabled-color);

	$link-mobile: setter(map-get($map, link-mobile), ());
	$link-mobile: map-merge((
		border-radius: $link-border-radius-mobile,
		color: $link-color-mobile,
		hover-bg: $link-hover-bg-mobile,
		hover-color: $link-hover-color-mobile,
		active-bg: $link-active-bg-mobile,
		active-color: $link-active-color-mobile,
		active-class-font-weight: $link-active-font-weight-mobile,
		disabled-bg: $link-disabled-bg-mobile,
		disabled-color: $link-disabled-color-mobile,
	), $link-mobile);

	// .menubar-collapse

	$collapse-bg-mobile: setter(map-get($map, collapse-bg-mobile), $dropdown-bg);
	$collapse-border-color-mobile: setter(map-get($map, collapse-border-color-mobile), $dropdown-border-color);
	$collapse-border-radius-mobile: setter(map-get($map, collapse-border-radius-mobile), $border-radius);
	$collapse-border-style-mobile: map-get($map, collapse-border-style-mobile);
	$collapse-box-shadow-mobile: setter(map-get($map, collapse-box-shadow-mobile), $dropdown-box-shadow);

	// .menubar-toggler

	// `$toggler-border-color-mobile` is deprecated use `$toggler-mobile` instead
	$toggler-border-color-mobile: map-get($map, toggler-border-color-mobile);
	// `$toggler-border-style-mobile` is deprecated use `$toggler-mobile` instead
	$toggler-border-style-mobile: map-get($map, toggler-border-style-mobile);
	// `$toggler-color-mobile` is deprecated use `$toggler-mobile` instead
	$toggler-color-mobile: setter(map-get($map, toggler-color-mobile), $link-active-color);
	// `$toggler-font-size-mobile` is deprecated use `$toggler-mobile` instead
	$toggler-font-size-mobile: map-get($map, toggler-font-size-mobile);
	// `$toggler-font-weight-mobile` is deprecated use `$toggler-mobile` instead
	$toggler-font-weight-mobile: map-get($map, toggler-font-weight-mobile);

	$toggler-mobile: setter(map-get($map, toggler-mobile), ());
	$toggler-mobile: map-merge((
		border-color: $toggler-border-color-mobile,
		border-style: $toggler-border-style-mobile,
		color: $toggler-color-mobile,
		font-size: $toggler-font-size-mobile,
		font-weight: $toggler-font-weight-mobile,
	), $toggler-mobile);

	background-color: $bg;
	border-color: $border-color;
	border-style: $border-style;

	@include media-breakpoint-down($breakpoint-down) {
		background-color: $bg-mobile;
		border-color: $border-color-mobile;
		border-style: $border-style-mobile;
	}

	.menubar-collapse {
		@include media-breakpoint-down($breakpoint-down) {
			background-color: $collapse-bg-mobile;
			border-color: $collapse-border-color-mobile;

			@include border-radius($collapse-border-radius-mobile);

			border-style: $collapse-border-style-mobile;

			@include box-shadow($collapse-box-shadow-mobile);
		}
	}

	.menubar-toggler {
		@include media-breakpoint-down($breakpoint-down) {
			@include clay-button-variant($toggler-mobile);
		}
	}

	.nav-link {
		@include clay-link($link);

		@include media-breakpoint-down($breakpoint-down) {
			@include clay-link($link-mobile);
		}
	}
}