.yc-link {
  cursor: pointer;
  padding: 1px 4px;
  line-height: 1.5715;
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-small);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  .yc-link-icon {
    flex-shrink: 0;
    color: inherit;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    .yc-spin {
      font-size: inherit;
      color: inherit;
    }
  }
}

// hoverable
.yc-link-hoverable {
  &:not(.yc-link-disabled):not(.yc-link-loading):hover {
    background-color: var(--color-fill-2);
  }
  &:not(.yc-link-disabled):not(.yc-link-loading):active {
    background-color: var(--color-fill-3);
  }
}

// disabled
.yc-link-disabled {
  cursor: not-allowed;
}

// loading
.yc-link-loading {
  cursor: default;
  position: relative;
}

@status: {
  normal: rgb(var(--primary-6));
  warning: rgb(var(--warning-6));
  success: rgb(var(--success-6));
  danger: rgb(var(--danger-6));
};
each(@status, {
  .yc-link-status-@{key} {
    color: @value;
    &.yc-link-loading,
    &.yc-link-disabled{
      color: if(@key=normal,var(--color-link-light-3),var(~"--color-@{key}-light-3"));
   }
  }

});
