@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

/*
 * For use on <button> elements to emulate the appearance of standard <a> tags.
*/

.link-button {
	@include mixins.transparent-effects;

	display: inline-block;
	padding: 0;
	border: none;
	color: tokens.$hyperlink;
	cursor: pointer;

	&:active,
	&.is-active {
		text-decoration: underline !important;
	}

	&.is-focused,
	&:hover,
	&.is-hovered {
		color: tokens.$primary-hover;
		text-decoration: underline !important;
	}

	@include mixins.focus-visible {
		color: tokens.$primary-hover;
		text-decoration: underline !important;
	}

	&:visited {
		color: tokens.$visited;
	}
}