.topnav-link {
	border: 1px solid transparent;
	border-radius: $global-border-radius;
	padding: 1.25rem 1.75rem;
	color: var(--color-nav-link, $white);
	text-decoration: none;

	&:focus,
	&:hover,
	&:active,
	&[aria-current="true"] {
		background-color:  $navigation-hover-bg-color;
		color: inherit;
		text-decoration: none;
	}

	&[aria-current="true"] {
		font-weight: bold;
	}

	& > svg {
		fill: var(--fillcolor-icons, $white);
	}
	&--blackfriday:before {
		content: '';
		position: absolute;
		width: 7px;
		height: 7px;
		background: $pm-global-warning;
		border-radius: 50%;
		left: calc(1.75rem + 15px);
		top: calc(50% - 14px);
	}
}


@if $rtl-option == true {
	[dir="rtl"] {
		.topnav-list {
			margin-left: 0;
			margin-right: 1em;
		}
		.topnav-icon {
			margin-right: 0;
			margin-left: .5em;
		}
	}
}

/* Decrease margins (was 1em) */
@include respond-to(1500) {
	.topnav-list {
		> li {
			margin-right: 1px;
		}
	}
}


@include respond-to(1300) {
	.topnav-list--four-elements {
		.navigation-title {
			// equivalent of .sr-only, but impossible to extend in a breakpoint
			border: 0;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}

		.topnav-icon {
			margin-right: 0;

			&.expand-caret {
				margin-left: .25em;
			}
		}
	}
}

@include respond-to(870) {
	.topnav-list--four-elements {

		.topnav-link {
			padding-left: .5rem;
			padding-right: .5rem;
		}
		.topnav-link--blackfriday:before {
			left: calc(.5rem + 15px);
		}
	}
}

@include respond-to(1100) {
	.navigation-title {
		// equivalent of .sr-only, but impossible to extend in a breakpoint
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.topnav-icon {
		margin-right: 0;
	}
}


@include respond-to($breakpoint-small) {
	.topnav-icon {
		width: 24px;
		height: 24px;
	}
	.topnav-list--four-elements .topnav-link {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
	.topnav-list--four-elements .topnav-link--blackfriday:before,
	.topnav-link--blackfriday:before {
		left: calc(1.75rem + 22px);
		top: calc(50% - 18px);
	}
}

@include respond-to($breakpoint-tiny) {
	.topnav-list--four-elements .topnav-link,
	.topnav-link {
		padding-left: .5rem;
		padding-right: .5rem;
	}
	.topnav-list--four-elements .topnav-link--blackfriday:before,
	.topnav-link--blackfriday:before {
		left: calc(.5rem + 22px);
	}
}