@mixin nav-link {
	display: inline-block;

	@include hover-focus {
		text-decoration: none;
	}

	// Disabled state lightens text and removes hover/tab effects
	&.disabled {
		color: $nav-disabled-link-color;

		@include plain-hover-focus {
			color: $nav-disabled-link-hover-color;
			cursor: $cursor-disabled;
			background-color: transparent;
		}
	}
}

@mixin dropdown-item {
	display: block;
	width: 100%; // For `<button>`s
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: $line-height;
	color: $dropdown-link-color;
	text-align: inherit; // For `<button>`s
	white-space: nowrap; // prevent links from randomly breaking onto new lines
	background: none; // For `<button>`s
	border: 0; // For `<button>`s

	@include hover-focus {
		color: $dropdown-link-hover-color;
		text-decoration: none;
		background-color: $dropdown-link-hover-bg;
	}

	// Active state
	&.active {
		@include plain-hover-focus {
			color: $dropdown-link-active-color;
			text-decoration: none;
			background-color: $dropdown-link-active-bg;
			outline: 0;
		}
	}

	// Disabled state
	//
	// Gray out text and ensure the hover/focus state remains gray
	&.disabled {
		@include plain-hover-focus {
			color: $dropdown-link-disabled-color;
		}

		// Nuke hover/focus effects
		@include hover-focus {
			text-decoration: none;
			cursor: $cursor-disabled;
			background-color: transparent;
			background-image: none; // Remove CSS gradient
			@include reset-filter();
		}
  	}
}