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

$typeMap: (
  danger: $--danger-6, 
  success: $--success-6, 
  warning: $--warning-6
);

@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: $--link-padding;
  font-size: $--font-size-body-3;
  font-weight: $--font-weight-400;
  &:hover {
    background: $--color-fill-3;
    // border-radius: 4px;
    border-radius: $--border-radius-small;
  }
  &:active{
    background: $--color-fill-4;
    border-radius: $--border-radius-small;
  }
  &:after {
    border-color: $--primary-6;
  }
  // @include when(hoverable) {
  //   &:hover{
  //     background: transparent !important;
  //   }
  // }
  @include when(disabled) {
    cursor: not-allowed;
    background: transparent !important;
  } 
  &.is-hoverable{
    &:hover{
      background: transparent !important;
    }
  }
  & [class*="el-icon-"] {
    & + span {
      margin-left: 5px;
    }
  }
    
  &.el-link--default  {
    color: $--primary-6;
    @include when(disabled) {
      // color: mix($--link-default-font-color, $--color-white, 50%);
      color: $--primary-3;
    }
  }

  &.el-link--danger {
    color: $--danger-6;
    @include when(disabled) {
      color: $--danger-2;
    }
  }
  
  &.el-link--success {
    color: $--success-6;
    @include when(disabled) {
      color: $--success-2;
    }
  }
  
  &.el-link--warning {
    color: $--warning-6;
    @include when(disabled) {
      color: $--warning-2;
    }
  }

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