@import "mixins/mixins";
@import "common/var";

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

@include 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: $--link-font-size;
	font-weight: $--link-font-weight;

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

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

	& [class*="el-icon-"] {
		& + span {
			margin-left: 5px;
		}
	}
    
    
	&.el-link--default  {
		color: $--link-default-font-color;
		&:hover {
			color: $--link-default-active-color
		}
		&:after {
			border-color: $--link-default-active-color
		}
		@include when(disabled) {
			color: $--link-disabled-font-color
		}
	}

	@each $type, $primaryColor in $typeMap {
		&.el-link--#{$type} {
			color: $primaryColor;
			&:hover {
				color: mix($primaryColor, $--color-white, 80%)
			}
			&:after {
				border-color: $primaryColor
			}
			@include when(disabled) {
				color: mix($primaryColor, $--color-white, 50%)
			}
			@include when(underline) {
				&:hover:after {
					border-color: $primaryColor
				}
			}
		}
	}
    
}