n8n/packages/design-system/src/css/link.scss

@use 'mixins/mixins';
@use './common/var';

$typeMap: (
	primary: var.$link-primary-font-color,
	danger: var.$link-danger-font-color,
	success: var.$link-success-font-color,
	warning: var.$link-warning-font-color,
	info: var.$link-info-font-color,
);

@include mixins.b(link) {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	position: relative;
	text-decoration: none;
	outline: none;
	cursor: pointer;
	padding: 0;
	font-size: var.$link-font-size;
	font-weight: var.$link-font-weight;

	@include mixins.when(underline) {
		&:hover:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			height: 0;
			bottom: 0;
			border-bottom: 1px solid var.$link-default-active-color;
		}
	}

	@include mixins.when(disabled) {
		cursor: not-allowed;
	}

	& [class*='el-icon-'] {
		& + span {
			margin-left: 5px;
		}
	}

	&.el-link--default {
		color: var.$link-default-font-color;
		&:hover {
			color: var.$link-default-active-color;
		}
		&:after {
			border-color: var.$link-default-active-color;
		}
		@include mixins.when(disabled) {
			color: var.$link-disabled-font-color;
		}
	}

	@each $type, $primaryColor in $typeMap {
		&.el-link--#{$type} {
			color: $primaryColor;
			&:hover {
				color: var.$color-primary-light-3;
			}
			&:after {
				border-color: $primaryColor;
			}
			@include mixins.when(disabled) {
				color: var.$color-primary-light-6;
			}
			@include mixins.when(underline) {
				&:hover:after {
					border-color: $primaryColor;
				}
			}
		}
	}
}