.eds-c-navigation__desktop-menu,
.eds-c-navigation__dropdown {
	display: none;
}

.eds-c-navigation__mobile-menu {
	@include u-list-reset;
}

.eds-c-navigation__expander-enhanced-but-no-js {
	.eds-c-navigation__menu,
	.eds-c-navigation__list {
		@include u-list-reset;
	}

	.eds-c-navigation__menu {
		@include u-container;
		display: grid;
		grid-template-columns: $t-eds-c-navigation-no-js-grid-columns;
		grid-column-gap: $t-eds-c-navigation-no-js-grid-column-gap;
		grid-row-gap: $t-eds-c-navigation-no-js-grid-row-gap;
	}

	.eds-c-navigation__dropdown {
		display: block;
	}

	.eds-c-navigation__link-icon {
		display: none;
	}
}

// Give a trigger link the visual appearance of an accordion on mobile if noDropdown is set to true
.eds-c-navigation__no-dropdown a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: $t-a-palette-default-greyscale-700;
	font-family: $t-a-typography-font-family-default;
	font-size: $t-a-typography-font-size-xs;
	font-weight: $t-a-typography-font-weight-bold;
	line-height: $t-a-typography-line-height-md;
	padding: $t-a-space-relative-400 $t-a-space-relative-600;
	border-top: 1px solid $t-a-palette-default-blue-light;
	border-bottom: 1px solid $t-a-palette-default-blue-light;
}

li + .eds-c-navigation__no-dropdown a {
	border-top: none;
}

@include from-wide-tablet {
	.eds-c-navigation {
		border-bottom: $t-eds-c-navigation-bottom-border; // decided that eds-c-navigation should own the border so consumers get a nice default border eds should cancel out this border in eds-c-header if needed
	}

	.eds-c-navigation__dropdown {
		display: block;
	}

	.eds-c-navigation__mobile-menu {
		display: none;
	}

	.eds-c-navigation__desktop-menu {
		@include u-list-reset;
		align-items: center;
		background-color: $t-eds-c-navigation-background-color;
		display: flex;
		flex-direction: row;
		font-family: $t-eds-c-navigation-font-family;
		font-size: $t-eds-c-navigation-font-size;
		font-weight: $t-eds-c-navigation-font-weight;
		gap: $t-eds-c-navigation-menu-items-gap;
		justify-content: flex-start;
		line-height: $t-a-typography-line-height-tight;
		padding: $t-eds-c-navigation-padding;
	}

	.eds-c-navigation__menu-link {
		position: relative;
		display: flex;
		text-decoration: none;
		color: $t-eds-c-navigation-menu-item-color;
		align-items: center;
		padding: $t-eds-c-navigation-menu-items-padding;

		&:before {
			content: "";
			position: absolute;
			display: block;
			width: 100%;
			height: $t-eds-c-navigation-pill-height;
			bottom: $t-eds-c-navigation-pill-bottom-position;
			left: 0;
			background-color: transparent;
			border-radius: $t-eds-c-navigation-pill-border-radius;
		}

		&:hover,
		&.is-open {
			color: $t-eds-c-navigation-active-color;

			&:before {
				background-color: $t-eds-c-navigation-pill-bg-color;
			}

			.eds-c-navigation__icon {
				color: $t-eds-c-navigation-icon-color-open;
				fill: $t-eds-c-navigation-icon-color-open;
			}
		}

		&.is-open {
			.eds-c-navigation__icon {
				transform: $t-eds-c-navigation-icon-transform-rotate;
			}
		}

		&--active {
			color: initial;

			&:before {
				background-color: $t-a-palette-default-blue-medium-700;
			}
		}

	}

	.eds-c-navigation__icon {
		width: $t-eds-c-navigation-icon-size;
		height: $t-eds-c-navigation-icon-size;
		margin-left: $t-eds-c-navigation-icon-margin-left;
		transition: $t-eds-c-navigation-icon-transition;
		color: $t-eds-c-navigation-icon-color-default;
		fill: $t-eds-c-navigation-icon-color-default;
	}

	.eds-c-navigation--tray-dropdown {
		.eds-c-navigation__heading {
			font-size: $t-a-typography-font-size-s;
			line-height: $t-a-typography-line-height-base;
			margin: 0 0 $t-a-space-relative-200;
		}

		.eds-c-navigation__list {
			@include u-list-reset;
			font-size: $t-eds-c-navigation-font-size;
			color: $t-a-palette-default-greyscale-800;
			font-weight: $t-a-typography-font-weight-normal;
			line-height: $t-a-typography-line-height-base;
		}

		.eds-c-navigation__list-item {
			padding: $t-a-space-relative-200 0;
		}

		.eds-c-navigation__list-link {
			color: currentColor;
		}

		.eds-c-navigation__dropdown {
			display: flex;
			row-gap: $t-eds-c-navigation-dropdown-gap;
			width: 100%;
			background-color: $t-eds-c-navigation-background-color;
			border-bottom: $t-eds-c-navigation-dropdown-border;
			padding: $t-eds-c-navigation-dropdown-padding;
			box-shadow: $t-eds-c-navigation-dropdown-shadow;
		}

		.eds-c-navigation__dropdown.has-tethered {
			position: absolute;
			z-index: 10;
			top: 100%;
			left: 0;
			flex-direction: row;
			column-gap: $t-eds-c-navigation-dropdown-gap;
			border-radius: $t-eds-c-navigation-dropdown-border-radius;
			border: $t-eds-c-navigation-dropdown-border;
		}

		.eds-c-navigation__dropdown-group {
			padding: $t-eds-c-navigation-dropdown-group-padding;
		}
	}

	.eds-c-navigation--fixed-width-dropdown {
		.eds-c-navigation__desktop-menu {
			border-bottom: none;
		}

		.eds-c-navigation__list {
			@include u-list-reset;
			display: flex;
			flex-direction: column;
			font-size: $t-eds-c-navigation-list-font-size;
			color: $t-eds-c-navigation-list-color;
			font-weight: $t-eds-c-navigation-list-font-weight;
			line-height: $t-eds-c-navigation-list-line-height;
		}

		.eds-c-navigation__dropdown {
			padding: 9px 0;
		}

		.eds-c-navigation__menu-item {
			position: relative;
		}

		.eds-c-navigation__dropdown.has-tethered {
			position: absolute;
			width: $t-eds-c-navigation-dropdown-width;
			z-index: $t-eds-c-navigation-dropdown-z-index;
			top: $t-eds-c-navigation-dropdown-top-position;
			left: 0;
			flex-direction: row;
			background-color: $t-eds-c-navigation-background-color;
			border-radius: $t-eds-c-navigation-dropdown-border-radius;
			border: $t-eds-c-navigation-dropdown-border;
			box-shadow: $t-eds-c-navigation-dropdown-box-shadow;
		}

		.eds-c-navigation__list-link {
			display: flex;
			align-items: center;
			width: 100%;
			height: 48px;
			color: currentColor;
			text-decoration: none;
			padding: 0 $t-a-space-relative-600;
			transition: all 0.2s;

			&--active {
				background-color: $t-eds-c-navigation-list-link-active-background-color;
				font-weight: $t-a-typography-font-weight-bold;

				.eds-c-navigation__link-icon {
					color: $t-eds-c-navigation-list-link-active-icon-color;
					fill: $t-eds-c-navigation-list-link-active-icon-color;
				}
			}

			&:focus {
				outline: none;
			}
		}

		.eds-c-navigation__list-link:focus {
			background-color: $t-eds-c-navigation-list-link-background-color;
			color: $t-eds-c-navigation-list-link-text-color;

			.eds-c-navigation__link-icon {
				color: currentColor;
				fill: currentColor;
			}
		}

		.eds-c-navigation__list:hover .eds-c-navigation__list-link:focus {
			background-color: initial;
			color: currentColor;

			.eds-c-navigation__link-icon {
				color: $t-eds-c-navigation-icon-color-default;
				fill: $t-eds-c-navigation-icon-color-default;
			}
		}

		.eds-c-navigation__list:hover .eds-c-navigation__list-link:hover {
			background-color: $t-eds-c-navigation-list-link-background-color;
			color: $t-eds-c-navigation-list-link-text-color;

			.eds-c-navigation__link-icon {
				color: currentColor;
				fill: currentColor;
			}
		}

		.eds-c-navigation__link-icon {
			width: $t-eds-c-navigation-icon-size;
			height: $t-eds-c-navigation-icon-size;
			margin-left: $t-eds-c-navigation-icon-margin-left;
			transition: $t-eds-c-navigation-icon-transition;
			color: $t-eds-c-navigation-icon-color-default;
			fill: $t-eds-c-navigation-icon-color-default;
		}
	}

}
