@use '@talend/design-tokens/lib/tokens' as tokens;

$icon-alignment-offset-m: -0.1875rem;
$icon-alignment-offset-s: -0.0625rem;

.link {
	font: tokens.$coral-paragraph-m-bold;
	color: tokens.$coral-color-info-text;
	background: none;
	border: none;
	border-bottom-color: currentColor;
	cursor: pointer;

	// Bullet-proof Bootstrap override solution
	&,
	&:hover,
	&:active,
	&:focus,
	&:visited {
		text-decoration: none;
	}

	.link__text {
		border-bottom: tokens.$coral-border-s-solid transparent;
		transition: tokens.$coral-transition-fast;
	}

	&:hover {
		color: tokens.$coral-color-info-text-hover;

		.link__text {
			border-bottom-color: tokens.$coral-color-info-border-hover;
		}
	}

	&:active {
		color: tokens.$coral-color-info-text-active;

		.link__text {
			border-bottom-color: tokens.$coral-color-info-border-active;
		}
	}

	&.linkDisabled {
		opacity: tokens.$coral-opacity-s;
		cursor: not-allowed;

		.link__text {
			border-bottom-color: transparent;
		}
	}

	&[aria-current='page'] {
		color: tokens.$coral-color-neutral-text;

		&:hover {
			color: tokens.$coral-color-info-text-hover;
		}

		&:active {
			color: tokens.$coral-color-info-text-active;
		}
	}
}