@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@import "mediawiki.ui/mixins";

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

	// Hover state
	&:hover {
		color: lighten( @mainColor, @colorLightenPercentage );
	}
	// Focus and active states
	&:focus, &:active {
		color: darken( @mainColor, @colorDarkenPercentage );
		outline: none; // outline fix
	}

	// 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-constructive">Constructive</a>
<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>

.mw-ui-quiet - Quiet until interaction.

Styleguide 6.2.
*/

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

	&.mw-ui-constructive {
		.mixin-mw-ui-anchor-styles( @colorConstructive );
	}

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

/*
Quiet anchors

Use quiet anchors when they are less important and alongside other progressive/destructive/progressive
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-constructive mw-ui-quiet">Constructive</a>
<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>

Styleguide 6.2.1.
*/
.mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
	color: @colorTextLight;
	text-decoration: none;

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