@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables.less';

// Helpers
.mixin-mw-ui-anchor-styles( @mainColor ) {
	color: @mainColor;

	&:hover {
		color: lighten( @mainColor, @colorLightenPercentage );
	}

	&:focus,
	&:active {
		color: darken( @mainColor, @colorDarkenPercentage );
		outline: 0;
	}

	// Quiet mode is gray at first
	&.mw-ui-quiet {
		.mixin-mw-ui-anchor-styles-quiet( @mainColor );
	}
}

/*
Anchors

The anchor base type can be applied to `a` elements when a basic context styling needs to be given to a link, without
having to assign it as a button type. `.mw-ui-anchor` only changes the text color, and should not be used in combination
with other base classes, such as `.mw-ui-button`.

Markup:
<a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a>
<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>

.mw-ui-quiet - Quiet until interaction.
*/

// Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive)
.mw-ui-anchor {
	&.mw-ui-progressive {
		.mixin-mw-ui-anchor-styles( @color-primary );
	}

	&.mw-ui-destructive {
		.mixin-mw-ui-anchor-styles( @color-destructive );
	}
}

/*
Quiet anchors

Use quiet anchors when they are less important and alongside other progressive/destructive
anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state.

Markup:
<a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a>
<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>
*/
.mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
	color: @color-base;
	text-decoration: none;

	&:hover {
		color: @mainColor;
	}

	&:focus,
	&:active {
		color: darken( @mainColor, @colorDarkenPercentage );
	}
}