@import '../variables/colors.less';

.o-link {
	background: transparent;
	border: none;
	color: @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: @color-gray-x-dark;
	}

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

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

	&.has-icon > .far,
	&.has-icon > .fal,
	&.has-icon > .fas,
	&.has-icon > .fab,
	&.has-icon > .mfly-font {
		margin-right: 5px;
	}

	&.has-icon > .o-link__text {
		text-decoration: underline;
	}

	&.is-disabled {
		color: @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.
	&.ng-animate:not(.ng-animate-opt-in) {
		transition-duration: 0s;
	}
}