@use "sass:color";

@use "../vars/vars";
@use "../vars/vars-night";

@layer vetools {
	// region Old
	.nav {
		.ve-dropdown-menu--top {
			margin-top: 0;
			border-top: 0;
		}
	}

	@media screen and (width <= #{vars.$width-screen-md}) {
		.nav > li > a {
			border: 1px solid vars.$rgb-border-grey;
		}

		.ve-night-mode .nav > li > a {
			border-color: vars-night.$rgb-border-grey--night;
		}
	}

	.ve-night-mode {
		.nav > li:not(.active) > a {
			color: vars-night.$rgb-font--night;
			background-color: vars-night.$rgb-bg--night;
			border: 1px solid vars-night.$rgb-border-grey--trans-night;
			border-top-width: 0;

			@media screen and (width <= #{vars.$width-screen-md}) {
				border-top-width: 1px;
			}

			&:focus,
			&:hover {
				background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
				color: #fff;
			}
		}

		.nav > li.active > a {
			&:focus,
			&:hover {
				color: #fff;
			}
		}

		.nav li.open > a,
		.nav li.open > a:focus,
		.nav li.open > a:hover {
			background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
			border-left: 1px solid vars.$rgb-link-blue;
			border-right: 1px solid vars.$rgb-link-blue;
			border-color: vars.$rgb-link-blue;
		}

		.nav li.active.open > a,
		.nav li.active.open > a:focus,
		.nav li.active.open > a:hover {
			background-color: vars.$rgb-off-black;
		}
	}

	@media screen and (width <= #{vars.$width-screen-lg}) {
		.nav .caret--right {
			transform: none;
		}

		.nav .ve-dropdown-menu--side {
			top: 100%;
			left: 0;
		}
	}
	// endregion

	// region New
	.nav2 {
		&-list__ {
			&label {
				padding: 0 20px;
			}

			&disp-source {
				display: inline-block;
				height: 15px;
				border-left: 1px solid;
				position: relative;
				border-right: 1px solid;
				top: 2px;
				margin-right: 7px;
				margin-left: 4px;
			}

			&disp-legacy-marker {
				top: -3px;
			}
		}

		&-accord__ {
			&head {
				padding: 3px 7px 3px 20px;

				&:focus,
				&:hover {
					background-color: vars.$rgb-bg--alt;
				}

				&--active {
					background: vars.$rgb-active-blue;
					color: #fff;

					&:focus,
					&:hover {
						background: vars.$rgb-active-blue--light;
					}
				}
			}

			&body {
				padding: 3px 0 3px 35px;
				display: flex;
				flex-direction: column;
			}

			&lnk-item {
				padding: 3px 20px;
				color: vars.$rgb-off-black;

				&:focus,
				&:hover {
					background-color: vars.$rgb-bg--alt;
					text-decoration: none;
				}

				&--active {
					background: vars.$rgb-active-blue;
					color: #fff;

					&:focus,
					&:hover {
						background: vars.$rgb-active-blue--light;
						color: #fff;
					}
				}
			}
		}
	}

	.ve-night-mode .nav2 {
		&-accord__ {
			&head {
				&:focus,
				&:hover {
					background-color: vars-night.$rgb-bg--alt-night;
					color: #fff;
				}

				&--active {
					color: #fff;

					&:focus,
					&:hover {
						background: vars.$rgb-active-blue--light;
					}
				}
			}

			&lnk-item {
				color: vars-night.$rgb-font--night;

				&:focus,
				&:hover {
					background-color: vars-night.$rgb-bg--alt-night;
					color: #fff;
				}

				&--active {
					color: #fff;

					&:focus,
					&:hover {
						background: vars.$rgb-active-blue--light;
					}
				}
			}
		}
	}
	// endregion

	.ve-dropdown-menu > .active > a,
	.ve-dropdown-menu > .active > a:focus,
	.ve-dropdown-menu > .active > a:hover {
		.nav2 {
			&-list__ {
				&disp-legacy-marker {
					color: #ccc;
				}
			}
		}
	}
}
