.link {
	background: transparent;
	border: none;
	color: var(--color-gray-medium);
	padding: 0; /* when a button has this class, we don't want the button's padding on it */
	text-decoration: underline;
	transition: color 0.3s;

	&:hover,
	&:focus {
		background: transparent;
		border: none;
		color: var(--color-gray-x-dark);
	}

	/* Style the focus outline for accessibility purposes */
	&:focus {
		background: transparent;
		border: none;
		outline: thin dotted;
		outline-offset: 0;
	}

	&.isDisabled {
		color: var(--color-gray-x-light);
		cursor: not-allowed;
	}

	/**
	 * Work around ng-show waiting the transition duration before hiding.
	 * https://github.com/angular/angular.js/issues/8224
	 *
	 * Apply the .ng-animate-opt-in class to get the old behavior back.
	 */
	&:global(.ng-animate):not(.ng-animate-opt-in) {
		transition-duration: 0s;
	}
}

/* Links that wrap an icon and some text (we don't want the icon to be underlined) */
.link.hasIcon {
	align-items: baseline;
	display: inline-flex;
	text-decoration: none;

	:global(.far),
	:global(.fal),
	:global(.fas),
	:global(.fab),
	:global(.mfly-font) {
		margin-right: 5px;
	}

	.linkText {
		text-decoration: underline;
	}
}